Слишком большая фото-ссылка. В чём проблема?

Question

[readrain]

Когда я делаю фото-ссылку, она получается на всю ширину сайта. Из-за этого я не могу разметить несколько таких фото-ссылок рядом.

Вот код:

<div class="price1" display: inline-block >
        <a href="E:\cccc\html\electrical_repair.html" class="numb1"  target="_self">
            <div class="product001"  >
              <img src="E:\cccc\html\i.jfif" width="250px" alt="установка сигнализации" class="electro"> 
           </div> 
          </a>
       <div> <p class="text_price2"> ремонт электооборуд. </p> </div>
</div>

.product001{
    top: 310px;
    position: absolute;
    padding-left: 500px;
    width: 220px;
    padding-bottom: 100px;
}
.header_text001{
    font-family: Snell Roundhand, cursive;
    font-size: 30px;
}
.electro{
    height: 100px;
    position: relative;
    left:100px;
    top: 80px;
}
.txt002{
    position: absolute;
    font-family: Snell Roundhand, cursive;
    padding-left: 530px;
    top: 200px;
    font-size: 25px;
}
.text_price2{
    font-family: Snell Roundhand, cursive;
    height: 100px;
    position: relative;
    left:500px;
    top: -260px;
    font-size: 30px;
}

Comments

[Alfieros]

Во-первых, это не html, а css стили. Во-вторых, вам нужно в стилях для карточки услуги записать следующее для тега img:

.product001 img{
width: 200px; // тут можете поиграть с шириной самой картинки
height: auto; // высота устанавливается auto, для того чтобы не было проблем с адаптацией картинки. Но можете принудительно задать высоту в "px" как с шириной, или 100%.
}

Хотя очень странно, что у вас для карточки задействовано абсолютное позиционирование и огроменные отступы. Больше похоже на то, что вы где-то копировали сайт. Либо это какой-то кривучий самописный слайдер.

[ThunderCat]

Код нормально оформить. В идеале в песочнице. И скрин что у вас там получается не получается. И укажите что должно получиться.

[Ankhena]

0. Оборачивайте код тегами <code></code>. Сами же видите, что разметка в вопросе сожралась.

1. Проверяйте код валидатором. На первых порах он избавит вас от кучи проблем. https://validator.w3.org/nu/

2. Ваша ссылка не может быть на всю ширину сайта, потому что её единственный ребенок имеет абсолютное позиционирование.
Я за вас сделала песочницу с кодом https://jsfiddle.net/sgyhxue5/
Посмотрите, ссылка обведена красным и стоит в уголочке крошечная.

3. Не стоит использовать абсолюты для всего подряд.
Для верстки сеток и микросеток изучите основы флексов и гридов.

Answer 1

[Domohod]

Размеры картинки можно указать так:

<a href="">
    <img style="" width="100" height="100">
</a>

В данном случае ширина и высота фото у вас будет 100 на 100 пикселей.