Пропорции блоков на css. Есть ли современное решение?

Question

[Seanyr]

На дворе уже 2020 год, а для создания блока с заданными пропорциями до сих пор используется padding-top в процентах.
Всё бы ничего, но контент внутри такого блока надо делать с абсолютным позиционированием, а это приносит свои минусы.
Может есть какое-то более современное решение, про которое я не знаю? Может через гриды как-нибудь?

Подробнее, если описание непонятно: например нам надо сделать блок с картинкой, который всегда будет квадратным, вне зависимости от пропорций картинки внутри него. Так же это часто используется для адаптивных оберток видео.

Comments

[Froggyweb]

calc() ?
ну или js :)

[Seanyr]

Froggyweb, с js понятно, здесь я именно про css спрашиваю. Как через calc? Что именно вычислять?

[Froggyweb]

https://stackoverflow.com/questions/16495162/using...

[Seanyr]

Froggyweb, ну это ссылка на вопрос) А решения у него нет. В ответах там тот старый способ с padding-top, и использование относительных единиц, что просто делает его резиновым и убивает всю отзывчивость верстки.

[Rustam Bainazarov]

На данный момент — нет иного подхода. Экспериментальное свойство не в счёт, на «продакшен» его нельзя пускать.

[Seanyr]

Рустам Байназаров, и всё же интересно почитать про него, мало ли взлетит

[Rustam Bainazarov]

Seanyr, так вам про него уже Flying написал.

[Seanyr]

Рустам Байназаров, ну да, я про это и говорю

Answer 1

[Flying]

Да, есть свойство aspect-ratio которое потихоньку начинает появляться в современных браузерах. Однако, поигравшись с ним немного - могу сказать что пока что использовать его на практике смысла никакого, придётся подождать пару лет как минимум.

На всякий случай ещё дам ссылку на статью, посвящённую разработке этого свойства.

Answer 2

[Pphahant Zulilind]

Вариант №1 (статический) Блок с картинкой, который всегда будет квадратным, вне зависимости от пропорций картинки внутри него:
https://codepen.io/codeshonpen/pen/Rwrpeap

Вариант №2 ("резиновый"):
https://codepen.io/codeshonpen/pen/LYGWgKL

Comments

[Seanyr]

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

[Pphahant Zulilind]

Seanyr, а как насчет такого варианта (стороны блока задал в vw)?
https://codepen.io/codeshonpen/pen/LYGWgKL

[Seanyr]

Искуственный Интеллект, про это тоже обсуждали уже. Вариант рабочий, но верстка становится резиновой, это не очень гибкий подход

[Pphahant Zulilind]

Тогда пардон - боюсь я не понимаю Вашего вопроса: вариант со статикой Вам не подходит; резиновость - тоже не подходит. А что же тогда предложить...

[Seanyr]

Искуственный Интеллект, да не, нормальные варианты, особенно если их объединить медиазапросом. Например увеличиваем в vw до определенного размера экрана, потом делаем статикой.
Но они не универсальны. Если к примеру нам нужно отталкиваться от размера самой картинки, и при этом обрезать её до нужных пропорций. Или нужно использовать размер родительских блоков в сетке, а не всего viewport. Тогда возникают проблемы. Да и vw несколько косячная, она же не учитывает ширину скроллбара

Answer 3

[Богдан Лесько]

div {
   width: 300px;
   height: 300px;
}

div img {
   width: 100%;
   height: 100%;
   object-fit: cover; #работает так же как и бекграунд
}