Могу ли я масштабировать высоту div пропорционально ширине с помощью CSS?

Question

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

<div class="ss"></div> 

CSS:

.ss { 
    width:30%; 
    height: half of the width; 
} 

Эта шкала ширины 30% с разрешением экрана

Answer 1

Вы можете сделать это с помощью прокладки на родительском элементе, поскольку относительное заполнение (даже по высоте) основано на ширине родительского элемента.

CSS:

.imageContainer { 
    position: relative; 
    width: 25%; 
    padding-bottom: 25%; 
    float: left; 
    height: 0; 
} 

img { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
} 

Для получения дополнительной информации обратитесь к этой статье на эту тему http://wemadeyoulook.at/en/blog/proportional-scaling-responsive-boxes-using-just-css/

Answer 2

Если вы хотите вертикальной проклейки пропорциональной ширине, установленной в пикселях на ограждающей DIV, я полагаю, вам нужен дополнительный элемент, например:

#html 

<div class="ptest"> 
    <div class="ptest-wrap"> 
     <div class="ptest-inner"> 
      Put content here 
     </div> 
    </div> 
</div> 

#css 
.ptest { 
    width: 200px; 
    position: relative; 
} 

.ptest-wrap { 
    padding-top: 60%; 
} 
.ptest-inner { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: #333; 
} 

Вот решение 2 div, которое не работает. Обратите внимание, что вертикальное заполнение 60% пропорционально ширине окна, а не div.ptest ширина:

http://jsfiddle.net/d85FM/

Вот пример с приведенной выше кодой, который делает работу:

http://jsfiddle.net/mmq29/

Answer 3

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

<div class="parent"> 
    <img class="aspect-ratio" src="images/aspect-ratio.png" /> 
    <div class="content">Content</div> 
</div> 

CSS

.parent { 
    position: relative; 
} 
.aspect-ratio { 
    width: 100%; 
    height: auto; 
} 
.content { 
    position: absolute; 
    width: 100%; 
    top: 0; left: 0; 
} 

Answer 4

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

<div id="MyDiv" class="proportional"> 
    <div> 
    <div> 
     <p>Content</p> 
    </div> 
    </div> 
</div> 

Вот общий CSS:

.proportional { position:relative; } 
.proportional > div > div { position:absolute; top:0px; bottom:0px; left:0px; right:0px; } 

Затем целевой первый внутренний DIV, чтобы установить ширину и высоту (обивка-топ):

#MyDiv > div { width:200px; padding-top:50%; } 

Answer 5

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

Надеюсь, это поможет любому!