@Artem0071
Безработный mr. Junior

Можно ли задать соотношение сторон изображения?

Можно ли как то тегу img задать соотношение сторон 3 к 2?
  • Вопрос задан
  • 159 просмотров
Пригласить эксперта
Ответы на вопрос 4
askhat
@askhat
Sharing is caring!
.some-picture {
  background: url('some-picture.png');
  background-size: fill;
  height: 300px;
  width: 400px;
  /* или вместо этих трёх строк */
  background-size: 300px 400px;
}


Для <img> есть правило object-fit
Ответ написан
@Froggyweb
Использовать слабо поддерживаемый object-fit
Делать паддинг родителю в процентах его высота должна быть 0. Детей располагать абсолютом
Либо js переводить img в бзкграунд и скрывать оригинал
Ответ написан
@alexalexes
У меня самый колхозный вариант был: создать png картинку с прозрачным цветом с нужным соотношением сторон (и самых гигантских размеров, каким может быть монитор) и поместить ее в виде img в контейнер на самом глубоком z-значении.
Пропорции контейнера выравнивались по содержимому и одновременно он мог быть любых не фиксированных стилем размеров.
Ответ написан
@andrew_andrey
Возьми вот эту библиотеку https://github.com/tomhodgins/cssplus Там есть readme нормальное, но если что, подключаешь aspecty.js или как тебе удобней. И для блоков, которым нужно задать пропорции, в css добавляешь --aspect-ratio: 3/2. Эта штука парсит css и сама будет подстраивать блоки в соответствии с пропорциями. Если подгружаешь асинхронно контент, надо будет релоадить каждый раз при подгрузке вызывая aspecty.load(). По дефолту вызывается на load, раскомментируй в исходниках вызов на resize или добавь сам на что там тебе надо обновлять размер блока.
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы