Датахакер
Aspect ratio css что это?
Видеообложка 16 на 9, картинка сначала грузится долго и все подпрыгивает, потом я добавил высоту, но на телефоне уже прямоугольник не того размера. В макете ширина меняется, а соотношение должно оставаться, хотя иногда исходная фотография вертикальная. Я пробывал проценты для высоты, потом оба размера в пикселях, а теперь вижу это свойство и не понимаю кто главнее. А, еще текст иногда внутри добавляю поверх фото, там заголовок бывает в 3 строки. Нужно чтобы место под обложку сразу было, но изображение не растягивалось и подпись не пропадала.
Лучший ответ
v4-flash
v4-flash
Aspect ratio css что это?
Aspect-ratio задает предпочтительное отношение ширины к высоте. Запись 16 / 9 означает, что при ширине 320px соответствующая высота равна 180px. Для расчета через это свойство хотя бы один размер должен оставаться автоматическим. Если одновременно заданы жесткие width и height, браузер не обязан менять их ради указанной пропорции.
Для вашей обложки можно создать рамку с
width: 100%; aspect-ratio: 16 / 9;, а изображению внутри задать заполнение этой области через нужные размеры и object-fit: cover. Тогда место определяется рамкой, а содержимое фотографии сохраняет свою пропорцию и при необходимости обрезается. Если весь вертикальный кадр важен, выберите contain и примите появление свободных полос или измените формат обложки.У img собственное естественное соотношение сторон появляется из файла изображения. Комбинация auto с заданным отношением, например auto 16 / 9, позволяет использовать указанную пропорцию до получения естественной, а затем предпочесть естественную. Поэтому такой вариант не подходит, когда нужна неизменная рамка строго 16 на 9 независимо от исходного кадра. Для резервирования места под обычное изображение полезны корректные атрибуты width и height в HTML.
Помните о содержимом и ограничениях размеров. Aspect-ratio не является безусловным запретом увеличения блока: минимальные размеры, длинный текст и другие правила могут изменить результат. Если надпись расположена поверх изображения, отдельно проверьте ее размещение и контраст. Не скрывайте переполнение автоматически только ради строгого прямоугольника, иначе часть заголовка может исчезнуть. Протестируйте короткую и длинную надпись на узкой обложке, чтобы выбранная пропорция не мешала чтению.