Гибкое соотношение сторон DIV, но как иметь максимальную высоту?

Question

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

См. Пример, я хотел бы, чтобы это масштабировалось, но как только он достигает высоты набора, высота не масштабируется (но сохраняет полную ширину).

#container { 
    background-color: #666; 
    color: #ccc; 
    padding-top: 23%; 
    height: 0; 
    overflow: hidden; 
} 

http://jsfiddle.net/louiswalch/9h4c8tor/

Answer 1

Если ваш контейнер должен быть полная страница с, как в вашей скрипке, вы можете использовать height: 23vw вместо padding: 23%. Поступая таким образом, вы можете также установить максимальную высоту:

#container { 
 
    background-color: #666; 
 
    color: #ccc; 
 
    height: 23vw; 
 
    max-height: 200px; 
 
    overflow: hidden; 
 
} 
 
#container .inner { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 20px; 
 
    right: 20px; 
 
    z-index: 1; 
 
    font-size: 11px; 
 
}

<div id="container"> 
 
    <div class="inner">This div should scale with the browser, and maintain the same aspect ratio.</div> 
 
</div>

Конечно, если элемент является менее широким, но вы знаете формулу, вы можете регулировать ширину. Например, если вы хотите, чтобы это составляло 50% ширины страницы, вы можете сделать высоту: calc(23vw * 0.5) или просто 11.5vw.

PS: Если вы хотите расположить внутренний элемент внутри внешнего устройства, обязательно добавьте position: relative к внешнему элементу. Это сделает верхний, левый, правый и нижний внутренние элементы относительно границ внешнего элемента.

Answer 2

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

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

Затем, чтобы фон продолжался, оберните контейнер и примените цвет фона к обертке.

(Demo)

body { 
 
    margin: 0; 
 
} 
 
.wrp-bg { 
 
    background-color: #666; 
 
} 
 
.wrp { 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
} 
 
#container { 
 
    padding-top: 23%; 
 
    position: relative; 
 
} 
 
#container .inner { 
 
    color: #ccc; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    bottom: 0; 
 
    padding: 20px; 
 
    font-size: 11px; 
 
    box-sizing: border-box; 
 
}

<div class="wrp-bg"> 
 
    <div class="wrp"> 
 
     <div id="container"> 
 
      <div class="inner">This div should scale with the browser, and maintain the same aspect ratio.</div> 
 
     </div> 
 
    </div> 
 
</div>