У меня есть сайт, который нужно собрать, с фиксированным соотношением сторон примерно 16:9
альбомного, как видео.
Я хочу, чтобы он был центрирован и расширен, чтобы заполнить доступную ширину и доступную высоту, но никогда не увеличиваться с обеих сторон.
Например:
- На высокой и тонкой странице содержимое будет растягиваться на всю ширину при сохранении пропорциональной высоты.
- На короткой широкой странице содержимое будет занимать всю высоту с пропорциональной шириной.
Я рассмотрел два метода:
- Используйте изображение с правильным соотношением сторон, чтобы расширить контейнер
div
, но я не мог заставить его вести себя одинаково в основных браузерах. - Установка пропорционального нижнего отступа, но это работает только относительно ширины и игнорирует высоту. Он просто увеличивается с шириной и отображает вертикальные полосы прокрутки.
Я знаю, что вы могли бы сделать это с помощью JS довольно легко, но мне нужно решение на чистом CSS.
Любые идеи?
html
css
responsive-design
aspect-ratio
Генри Гибсон
источник
источник
position: relative (default) height: 0 padding-<top/bottom>: H/W*100%
Ответы:
Используйте новые единицы просмотра CSS
vw
иvh
(ширина области просмотра / высота области просмотра)FIDDLE
Измените размер по вертикали и горизонтали, и вы увидите, что элемент всегда будет заполнять максимальный размер области просмотра без нарушения соотношения и без полос прокрутки!
(ЧИСТЫЙ) CSS
Показать фрагмент кода
Если вы хотите использовать максимум 90% ширины и высоты области просмотра: FIDDLE
Показать фрагмент кода
Кроме того, поддержка браузеров тоже неплохая: IE9 +, FF, Chrome, Safaricaniuse.
источник
vh
,vw
,vmin
,vmax
). Однако есть обходной путь , который использует медиа-запросы для нацеливания на устройства iOS.Просто переформулируйте
Danield
ответ в миксине LESS для дальнейшего использования:источник
Используйте медиа-запрос CSS
@media
вместе с единицами области просмотра CSSvw
иvh
адаптируйте к соотношению сторон области просмотра. Это дает возможность обновлять и другие свойства, напримерfont-size
.Эта скрипка демонстрирует фиксированное соотношение сторон для div и текст, точно соответствующий его масштабу.
Исходный размер основан на полной ширине:
Затем, когда область просмотра шире, чем желаемое соотношение сторон, переключитесь на высоту в качестве базовой меры:
Это очень похоже на вене к
max-width
иmax-height
подход по @Danield, только более гибким.источник
Мой первоначальный вопрос для этого заключался в том, как иметь элемент фиксированного аспекта, но точно уместить его в указанном контейнере, что делает его немного неудобным. Если вы просто хотите, чтобы отдельный элемент сохранял свое соотношение сторон, это намного проще.
Лучший метод, с которым я столкнулся, - это присвоить элементу нулевую высоту, а затем использовать процентное заполнение-основание, чтобы задать ему высоту. Отступ в процентах всегда пропорционален ширине элемента, а не его высоте, даже если это верхнее или нижнее отступы.
Свойства заполнения W3C
Таким образом, используя это, вы можете дать элементу процентную ширину для размещения в контейнере, а затем заполнить его, чтобы указать соотношение сторон или, другими словами, соотношение между его шириной и высотой.
Итак, в приведенном выше примере объект занимает 80% ширины контейнера, а его высота составляет 56,25% от этого значения. Если его ширина была 160 пикселей, то нижний отступ, и, таким образом, высота была бы 90 пикселей - соотношение сторон 16: 9.
Небольшая проблема, которая может не быть для вас проблемой, заключается в том, что внутри вашего нового объекта нет естественного пространства. Если вам нужно вставить какой-то текст, например, и этот текст должен принимать собственные значения заполнения, вам нужно добавить контейнер внутри и указать там свойства.
Также модули vw и vh не поддерживаются в некоторых старых браузерах, поэтому принятый ответ на мой вопрос может быть для вас невозможен, и вам, возможно, придется использовать что-то более низкое.
источник
Насколько я понимаю, вы просили
CSS
конкретное решение. Чтобы сохранить соотношение сторон, вам нужно разделить высоту на желаемое соотношение сторон. 16: 9 = 1,777777777778.Чтобы получить правильную высоту для контейнера, вам нужно разделить текущую ширину на 1,777777777778. Поскольку вы не можете проверить
width
контейнер с помощью простогоCSS
или разделенного на процентное значениеCSS
, это невозможно безJavaScript
(насколько мне известно).Я написал рабочий скрипт, который сохранит желаемое соотношение сторон.
HTML
CSS
JavaScript
Вы можете использовать
function
снова, если хотите отобразить что-то еще с другим соотношением, используяисточник
window.onresize
запускается в момент изменения размера браузера.Теперь для решения этой проблемы указано новое свойство CSS:
object-fit
.http://docs.webplatform.org/wiki/css/properties/object-fit
Поддержка браузеров все еще несколько отсутствует ( http://caniuse.com/#feat=object-fit ) - в настоящее время в некоторой степени работает в большинстве браузеров, кроме Microsoft, но со временем это именно то, что требовалось для ответа на этот вопрос.
источник
Ответ Даниилда хорош, но его можно использовать только тогда, когда div заполняет всю область просмотра, или, используя немного
calc
, можно использовать, если ширина и высота другого содержимого в области просмотра известны.Однако, объединив
margin-bottom
трюк с методом в вышеупомянутом ответе, проблема может быть сведена к простому знанию высоты другого контента. Это полезно, если у вас есть заголовок с фиксированной высотой, но, например, ширина боковой панели неизвестна.Здесь он находится в jsfiddle с использованием scss , что делает более очевидным, откуда берутся значения.
источник
Основываясь на ответе Дэниела , я написал этот миксин SASS с интерполяцией (
#{}
) для iframe видео YouTube, который находится внутри модального диалогового окна Bootstrap:Использование:
HTML:
Это всегда будет отображать видео без тех черных частей, которые youtube добавляет в iframe, если ширина или высота не пропорциональны видео. Ноты:
$sides-adjustment
это небольшая регулировка, чтобы компенсировать крошечную часть этих черных частей, которые видны по бокам;.modal-footer
;.modal-dialog
;.modal-header
.После долгих испытаний теперь у меня это работает безупречно.
источник
здесь решение, основанное на решении @Danield, которое работает даже в div.
В этом примере я использую Angular, но он может быстро перейти на стандартный JS или другой фреймворк.
Основная идея - просто переместить решение @Danield в пустой iframe и скопировать размеры после изменения размера окна iframe.
Этот iframe должен соответствовать размерам своего родительского элемента.
https://stackblitz.com/edit/angular-aspect-ratio-by-iframe?file=src%2Findex.html
Вот несколько скриншотов:
источник