Xaip
@Xaip

Позиционнирование изображение внутри блока?

Пользуюсь бутстрапом и флекс блоками для создания сетки товаров для интернет магазина. Необходимо правильно обработать изображения так что бы они умещались в блок с определенной высотой height. Причем все изображения очень отличаются, от телефона до холодильника).
Пока имею только такой код(для изображения)
<div class="img-block">
     <img href="something.img" />
</div>
  • Вопрос задан
  • 273 просмотра
Решения вопроса 1
tolfy
@tolfy
Фирменный стиль
Рискну предложить, возможно не самый лучший, но быстрый и практически беспроблемный вариант с использованием background-image

<div class="img-block"  style="background-image: url(something.img)">
     <img href="something.img" />
</div>

в принципе, имеем так:
<div class="img-block"  style="background-image: url(something.img)">
</div>

.img-block {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.img-block img {
    opacity: 0;
}


Скрываем IMG, вместо него показываем background-image.
Плюсы: кроссбраузерность, лёгкая правка кода, не требуется подготовка иллюстраций
Минусы: засорение кода, хотя, если СЕО не так важно и заданы размеры блока, то <img> можно совсем удалить.
* если во все <img> вставлять один и тот же файл something.img, этим можно контролировать линейные размеры блока <div>, не указывая его размер в стилях.

пример https://codepen.io/tolfy/pen/MGVbwJ
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
profesor08
@profesor08 Куратор тега CSS
img {
  width: 100%;
  height: 100%;
  object-fit: cover; // contain
}


Больше ты ничего не сделаешь со своими картинками.
Ответ написан
Комментировать
Если Aspect Ratio разный (соотношения сторон 1:1, 3:2, 8:5 etc) то, думаю роботы не помогут вам в таком случае, когда карточки товара должны быть одинакового размера - только ручная работа, подгонять собственноручно, или наняв дизайнера и контент-менеджера
Ответ написан
Комментировать
@Jumandjilos
если для интернет магазина, то лучше не флексы, а css grid используй
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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