Обрезать картинку, с определенным соотношением сторон?

Question

[Mois]

Есть ряд картинок, с рандомным соотношением сторон у каждой.
Требуется выровнять их по сетке, при этом, что бы каждая картинка была с соотношением 2x3..

Я понимаю что это можно сделать с помощью js, но так же очень надеюсь что мне не потребуется его впихивать для такой пустяковой задачи.

И вот в чем тут еще проблема, высота картинки определяется от высоты родительского блока..

И еще, все что не вписывается в размер отрезается

Comments

[Максим]

а типа фиксированный блок и потом уже для img {display:block; width:100%;height:100%;} разве не подходит ?

[Mois]

Максим Жаров: так замечательно, если бы тогда я мог создать адаптивный блок, с определенным соотношение сторон..

Answer 1

[Алексей]

Я бы на вашем сделал контейнер с картинкой прозрачной с необходимым соотношением сторон (типа 2х3 пикселя) и растягиваем на всю ширину родителя. А реальную картинку помещаем в этот контейнер и абсолютно позиционируем (допустим 0:0, не вошедшее обрезается). Естественно контейнеру присваиваем overflow:hidden;

Кстати вот подобный вопрос: https://toster.ru/answer?answer_id=852886
Там же есть мой более развернутый ответ.

Comments

[Mois]

Решение конечно, но уж больно грязновато..
Я бы еще пару мнений выслушал(

Хотя в какой то степени это даже круто, в том плане что если эта картинка будет в приоритете, то пока страница грузится, не будет пустого места (серенькой ее сделаю).

Но все равно хочется более элегантного решения)

[Алексей]

Посмотрю, что еще посоветуют. Буду рад узнать новый способ )

[Mois]

Все таки я ошибался, это очень элегантное решение.. Еще и подстраховка, что бы все не поплыло

Answer 2

[AlikDex]

делаете блок с соотношением 2x3
в него вставляете картинку со следующим цсс:

display: block;
width: 100%;
object-fit: cover;

ключевое правило

object-fit: cover;

Если нужны картинки разных размеров с заданным соотношением, то средствами цсс это будет сделать проблематично.

Comments

[Mois]

как сделать блок с определенным соотношением?

[AlikDex]

Mois: https://css-tricks.com/snippets/sass/maintain-aspe... тут миксин и пример чистого кода, как сделать блок с соотношением. В комментах есть ссылки на стек. Насчет кроссбраузерности в душе не знаю как оно поведет себя т.к. не тестил.