позволяет сказать, что у вас есть 2 divs div div - контейнер, а внутренний может быть любым элементом, который вам нужен для поддержания его отношения (img или iframe iframe или что-то еще).

html выглядит следующим образом:

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->

позволяет утверждать, что соотношение «элемент»

=> 4 к 1 или 2 к 1 ...

css выглядит так:

.container{
  position: relative;
  height: 0
  padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/

}

.element{
  width : 100%;
  height: 100%;
  position: absolute; 
  top : 0 ;
  bottom : 0 ;
  background : red; /* just for illustration */
}

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

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

Предположим, что у вас есть встроенное видео:

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

Затем вы можете разместить все это внутри div с классом «видео». Этот видеокласс, вероятно, будет жидким элементом вашего сайта, который сам по себе не имеет прямых ограничений по высоте, но при изменении размера браузера он будет меняться по ширине в соответствии с потоком веб-сайта. Это будет тот элемент, который вы, вероятно, пытаетесь получить во встроенном видео, сохраняя при этом определенное соотношение сторон видео.

Чтобы сделать это, я поместил изображение перед встроенным объектом в «видео» "класс div.

!!! Важная часть состоит в том, что изображение имеет правильное соотношение сторон, которое вы хотите сохранить. Кроме того, убедитесь, что размер изображения максимально высок, чем самый маленький, который вы ожидаете от видео (или того, что вы поддерживаете A.R.), чтобы получить на основе вашего макета. Это позволит избежать любых возможных проблем при разрешении изображения при его изменении в процентах. Например, если вы хотите сохранить соотношение сторон 3: 2, не просто используйте изображение 3px на 2px. Он может работать при некоторых обстоятельствах, но я не проверял его, и, вероятно, было бы неплохо избежать.

Вероятно, вы уже должны иметь минимальную ширину, как это определено для жидкостных элементов вашего веб-сайта. Если нет, рекомендуется сделать это, чтобы избежать измельчения элементов или перекрытия, когда окно браузера становится слишком маленьким. В какой-то момент лучше иметь полосу прокрутки. Наименьшая по ширине веб-страница должна быть где-то около ~ 600 пикселей (включая столбцы фиксированной ширины), поскольку разрешение экрана меньше, если только вы не имеете дело с телефонами. !!!

Я использую полностью прозрачный png, но на самом деле я не думаю, что это имеет значение, если вы сделаете это правильно. Например:

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

Теперь вы можете добавить CSS, похожий на следующее:

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

Убедитесь, что вы также удалили любое явное объявление высоты или ширины внутри объекта и вставлять теги, которые обычно поставляются с копированным / вставленным кодом встраивания.

Способ, которым он работает, зависит от свойств позиции элемента класса видео и элемента, который вы хотите сохранить, определенного формата. Он использует то, как изображение будет поддерживать правильное соотношение сторон при изменении размера элемента. Он сообщает, что все еще находится в элементе видео класса, чтобы получить полную выгоду от недвижимости, предоставляемой динамическим изображением, заставляя ее ширину / высоту до 100% элемента видеокласса корректироваться с помощью изображения.

Довольно круто, а?

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

Как указано в здесь на w3schools.com и несколько повторено в этом принятом ответе , значения заполнения в процентах (выделение мое):

Определяет заполнение в процентах от ширины содержащего элемента

Ergo, правильный пример чувствительного DIV, который поддерживает соотношение сторон 16: 9, выглядит следующим образом:

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

Демонстрация на JSFiddle

Эллиот вдохновил меня на это решение - спасибо:

aspectratio.png - полностью прозрачный PNG-файл с размером вашего предпочтительного соотношения сторон, в моем случае 30x10 пикселей.

HTML

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

Обратите внимание: background-size является функцией css3, которая может не работать с вашими целевыми браузерами. Вы можете проверить совместимость (например, на caniuse.com ).

SCSS - лучшее решение в моем случае; используя атрибут data:

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;

    &:before {
        content: '';
        display: block;
    }

    > * {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
[data-aspect-ratio="3:1"]:before {
    padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}

Например:

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

source

Вы можете использовать svg. Сделайте положение контейнера / обертки относительным, сначала установите svg как статически, а затем разместите абсолютно позиционированное содержимое (сверху: 0; слева: 0; справа: 0; внизу: 0;)

Пример с 16: 9 пропорций:

image.svg: (может быть встроено в src)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

CSS:

.container {
  position: relative;
}
.content {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
}

HTML:

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

Обратите внимание, что встроенный svg не работает, но вы можете urlencode svg и вставить его в атрибут img src следующим образом:

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />

Если вы хотите поместить квадрат в окно просмотра на любом портретном или альбомном представлении (насколько это возможно, но ничего не торчит снаружи), переключитесь между использованием vw / vh в ориентации portrait / landscape :

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 

Чтобы добавить к ответу Web_Designer, <div> будет иметь высоту (полностью состоящую из нижней части), равную 75% от ширины ее содержащего элемента. Вот хорошее резюме: http://mattsnider.com/css-using-percent-for-margin-and-padding/ . Я не уверен, почему это так, но так оно и есть.

Если вы хотите, чтобы ваш div был шириной, отличной от 100%, вам понадобится другой обертывающий div, на котором нужно установить ширину:

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

Недавно я использовал что-то похожее на трюк с изображениями Эллиота, чтобы позволить мне использовать мультимедийные запросы CSS для обслуживания другого файла логотипа в зависимости от разрешения устройства, но все же масштабировать пропорционально, как это делал <img> (Я устанавливаю логотип в качестве фонового изображения на прозрачный .png с правильным соотношением сторон). Но решение Web_Designer избавит меня от HTTP-запроса.

Если бы вся структура контейнера была основана на процентах, это было бы поведением по умолчанию, можете ли вы предоставить более конкретный пример?

Ниже приведен пример того, что я имею в виду, если вся ваша родительская иерархия была% основанная, любая регулировка окна браузера будет работать без каких-либо дополнительных js / css, это не возможно с вашим расположением?

<div style="width: 100%;">
   <div style="width: 50%; margin: 0 auto;">Content</div>
</div>

Просто идея или взлома.

div {
  background-color: blue;
  width: 10%;
  transition: background-color 0.5s, width 0.5s;
  font-size: 0;
}

div:hover {
  width: 20%;
  background-color: red;
}
  
img {
  width: 100%;
  height: auto;
  visibility: hidden;
}

<div>
  <!-- use an image with target aspect ratio. sample is a square -->
  <img src="http://i.imgur.com/9OPnZNk.png" />
</div>

На основе ваших решений я сделал несколько трюков:

Когда вы его используете, ваш HTML будет только

<div data-keep-ratio="75%">
    <div>Main content</div>
</div>

Чтобы использовать его таким образом, выполните: CSS:

*[data-keep-ratio] {
    display: block;
    width: 100%;
    position: relative;
}
*[data-keep-ratio] > * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

и js (jQuery)

$('*[data-keep-ratio]').each(function(){ 
    var ratio = $(this).data('keep-ratio');
    $(this).css('padding-bottom', ratio);
});

И имея это, вы просто устанавливаете attr data-keep-ratio на высоту / ширину и все.

В то время как большинство ответов очень классные, большинство из них требуют правильного размера изображения ... Другие решения работают только по ширине и не заботятся о высоте, но иногда вы хотите поместить контент в определенная высота тоже.

Я попытался связать их вместе, чтобы принести полностью портативное и многозначное решение ... Фокус в том, чтобы использовать для автоматического масштабирования изображения, но вместо этого использовать встроенный элемент svg использования предварительно обработанного изображения или любой формы второго HTTP-запроса ...

div.holder{
  background-color:red;
  display:inline-block;
  height:100px;
  width:400px;
}
svg, img{
  background-color:blue;
  display:block;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
}
.content_sizer{
  position:relative;
  display:inline-block;
  height:100%;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(155,255,0,0.5);
}

<div class="holder">
  <div class="content_sizer">
    <svg width=10000 height=5000 />
    <div class="content">
    </div>
  </div>
</div>

Обратите внимание, что я использовал большой значения в атрибутах ширины и высоты SVG, так как он должен быть больше максимального ожидаемого размера, поскольку он может только уменьшаться. Пример делает соотношение div 10: 5

Это улучшает принятый ответ:

• Использует псевдоэлементы вместо разделителей обертки
• Соотношение сторон основывается на ширине поля вместо его parent
• Ящик будет растягиваться вертикально, когда содержимое станет более высоким

.box {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #CCC;
}

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}

.fixed-ar-16-9::before {
  padding-top: 56.25%;
}
.fixed-ar-3-2::before {
  padding-top: 66.66%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-1-1::before {
  padding-top: 100%;
}

.width-50 {
  display: inline-block;
  width: 50%;
}
.width-20 {
  display: inline-block;
  width: 20%;
}

<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>

vw единиц:

Вы можете использовать блоки vw для ширины и высоты элемента. Это позволяет сохранить пропорции элемента в зависимости от ширины окна просмотра.

vw: 1 / 100th ширины окна просмотра. [ MDN ]

В качестве альтернативы вы также можете использовать vh для высоты видового экрана или даже vmin / vmax для использования меньшего / большего размера размеров просмотра (обсуждение здесь ).

Пример: соотношение сторон 1: 1

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

<div></div>

Для других соотношений сторон вы можете использовать следующую таблицу для вычисления значения высоты в соответствии с шириной элемента:

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

Пример: 4x4 сетка квадратных divs

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  background: gold;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Вот скрипка с этой демонстрацией , и вот

---

Поддержка браузера для модулей vh / vw - это IE9 + см. canIuse для получения дополнительной информации

Я столкнулся с этой проблемой довольно часто, поэтому я сделал для нее решение JS. Это в основном регулирует высоту domElement по ширине элемента по указанному вами соотношению. Вы можете использовать его следующим образом:

<div ratio="4x3"></div>

Имейте в виду, что поскольку он устанавливает высоту элемента, элемент должен быть либо display:block, либо display:inline-block.

https://github.com/JeffreyArts/html-ratio-component

Вы можете использовать флеш-макет (FWD).

https://en.wikipedia.org/wiki/Adaptive_web_design

Он будет масштабироваться и поддерживать макет, он немного сложный, но позволяет изменять размер страницы, не нажимая на такой контент, как (RWD).

Он выглядит отзывчивым, но он масштабируется. https://www.youtube.com/watch?v=xRcBMLI4jbg

Вы можете найти формулу масштабирования CSS здесь:

http: //plugnedit.com/pnew/928-2/

Я использовал новое решение.

.squares{
  width: 30vw
  height: 30vw

К основному соотношению сторон

.aspect-ratio
  width: 10vw
  height: 10vh

Однако это касается всего окна просмотра. Итак, если вам нужен div, который составляет 30% ширины видового экрана, вместо этого вы можете использовать 30vw, и, поскольку вы знаете ширину, вы будете использовать их по высоте с помощью модуля calc и vw.

Поскольку @ web-tiki уже показывает способ использования vh / vw, мне также нужен способ центрировать на экране, вот код фрагмента для портрета 9:16.

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateY будет удерживать этот центр на экране. calc(100vw * 16 / 9) ожидается высота для 9/16. (100vw * 16 / 9 - 100vh) - высота переполнения, поэтому pull up overflow height/2 будет удерживать ее на экране.

Для пейзажа и сохранения 16: 9 вы показываете use

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

Коэффициент 9/16 является легкостью для изменения, нет необходимости предопределять 100:56.25 или 100:75. Если вы хотите сначала обеспечить высоту, вы должны переключить ширину и высоту, например height:100vh;width: calc(100vh * 9 / 16) для изображения 9:16.

Если вы хотите адаптироваться для разных размеров экрана, вы также можете заинтересовать

• background-size обложка / содержать Над стилем похож на содержащий, зависит от ширины: отношение высоты.
• object-fit обложка / содержит для тега img / video
• @media (orientation: portrait) / @media (orientation: landscape) Запрос мультимедиа для portrait / landscape на измените соотношение.