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

Question

[Xaip]

Пользуюсь бутстрапом и флекс блоками для создания сетки товаров для интернет магазина. Необходимо правильно обработать изображения так что бы они умещались в блок с определенной высотой height. Причем все изображения очень отличаются, от телефона до холодильника).
Пока имею только такой код(для изображения)

<div class="img-block">
     <img href="something.img" />
</div>

Comments

[Pavel Karinin]

а стили какие-нибудь для этих (которые у вас в коде) элементов заданы уже?

[Монти Пайтон]

Pavel Karinin, зачем он у одиночного тэга ставит слэш?

[Pavel Karinin]

Ostin1, ну вообще-то это по стандарту так положено было, в HTML5 это уже не обязательно.

[Andrew]

Так в чем проблема?
Блоки должны быть одинаковыми?(высота,ширина)

[Pavel Karinin]

Andrew, так вот у автора вопроса не ясно какие стили уже есть, чтоб понять от чего отталкиваться

[Монти Пайтон]

Pavel Karinin, у него бутстрап ванильный, ему нужны наверное значения названий атрибутов ;)

Answer 1

[Antony Bark]

Рискну предложить, возможно не самый лучший, но быстрый и практически беспроблемный вариант с использованием 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

Answer 2

[profesor08]

img {
  width: 100%;
  height: 100%;
  object-fit: cover; // contain
}

Больше ты ничего не сделаешь со своими картинками.

Answer 3

[Монти Пайтон]

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

Answer 4

[Jumandjilos]

если для интернет магазина, то лучше не флексы, а css grid используй