Как исправить проблему с макетом / позиционированием изображения?

#html #css

#HTML #css

Вопрос:

Минимальный код для воспроизведения проблемы:

 <!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div style="border: 1px solid red; width: 3px; height: 30px;">
        <img src="images1.png" style="object-fit: fill; width: 100%; height: 100%;">
    </div>
    <div style="border: 1px solid blue; width: 30px;  height: 3px;">
        <img src="images1.png" style="object-fit: fill; width: 100%; height: 100%;">
    </div>
</body>
</html>

Развернуть фрагмент

Нижнее изображение смещается вниз относительно контейнера, хотя верхнее изображение нигде не смещается.
Если высота нижнего контейнера увеличена до 15 пикселей, то все отображается нормально. Проблема воспроизводима, по крайней мере, в браузерах Firefox 84.0.1 x 64 и MS Edge 87.0.664.66.
Почему это происходит и как это исправить?

1. Как это выглядит для вас? в предоставленном вами фрагменте кода буквально нечего видеть или воспроизводить. Как это должно выглядеть? Пожалуйста, добавьте изображения, показывающие проблему, и чертеж предполагаемого макета.

Ответ №1:

Изображение выравнивается по вертикали с базовой линией стойки, которая определяется размером шрифта и высотой строки div.

Строка, содержащая strut и img, превышает высоту div, и поскольку для переполнения div установлено значение «видимый», изображение отображается под div.

Чтобы исправить, нарушьте вертикальное выравнивание с помощью стойки, установив

 img {
  vertical-align:top;
}

Показать фрагмент кода

 img {
  vertical-align:top;
}

 <!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div style="border: 1px solid red; width: 3px; height: 30px;">
        <img src="images1.png" style="object-fit: fill; width: 100%; height: 100%;">
    </div>
    <div style="border: 1px solid blue; width: 30px;  height: 3px;">
        <img src="images1.png" style="object-fit: fill; width: 100%; height: 100%;">
    </div>
</body>
</html>

Развернуть фрагмент

1. Спасибо. Это работает! Но почему div переполняется, разве изображение не должно подстраиваться под него? И почему все отображается нормально, если мы увеличиваем высоту div до 15 пикселей?

2. «… разве изображение не должно подстраиваться под него?» Нет, в спецификациях CSS нет ничего, что говорило бы, что это должно быть, не говоря уже о том, когда эта корректировка должна быть применена или какой именно будет эта корректировка. К тому времени, когда высота div увеличивается до 15 пикселей, она охватывает базовую линию стойки, и изображение полностью располагается над ним, и поэтому внутри div.

Ответ №2:

Вы также можете указать тип отображения для img как «блок».

 .block-img {
  display: block;
}

Развернуть фрагмент

Но это не всегда уместно с точки зрения дизайна.