IwanQ
@IwanQ
Плохие времена часто дают прекрасные возможности

Как центрировать изображения?

Здравствуйте. Есть код - https://jsfiddle.net/b1to03nx/

Картинка №3 центрирована отлично, но остальные как видите обрезаны. Как это исправить без применения height: 100%;

Заранее спасибо.
  • Вопрос задан
  • 104 просмотра
Решения вопроса 2
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
object-fit
Высоту придется задавать 100% (если нельзя писать height, не знаю уж почему, то можно растянуть абсолютом или флексом), потому что высоту вашей картинки не хватает, чтобы заполнить всю область.
Разумно использовать картинки с размерами пропорциональными размерам блока (в вашем случае квадратные)
Ответ написан
JRK_DV
@JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq
Почему так?
Для картинок (тег img) у вас указаны стили фона - они не работают, потому что тег img это не фоновый элемент.
Картинки обрезаны, потому что высота тега img недостаточная (сама картинка не влезает в размеры тега img)
Что можно тут сделать?
Вариант 1: Использовать картинки размерами кратными с размерами тега img.
Вариант 2: Использовать стиль object-fit: cover и растянуть по высоте тег img на нужный размер.
Как растянуть по высоте тег "img"?
Т.к. вам надо без применения height, то можно установить стиль display: inline-flex для ссылок (тег "a").
У flex элементов значение стиля align-items по умолчанию - Растягивать элементы на размеры родительского блока
С другой стороны, применение height для картинок даст такой же эффект, но без использования флекса.

Пример с height и flex вариантом
https://jsfiddle.net/f7a2qyj8/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы