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

Question 1

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

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

CSS:

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

Эти 30% ширины масштабируются с разрешением экрана.

Question 2

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

CSS:

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

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

Это основано на этой статье: Пропорциональное масштабирование адаптивных блоков с использованием только CSS

Question 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;
}

Question 4

Вы можете использовать ширину обзора для «ширины» и снова половину ширины обзора для «высоты». Таким образом, вам гарантируется правильное соотношение независимо от размера области просмотра.

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

.ss
{
    width: 30vw;
    height: 15vw;
}

Скрипка

Question 5

Если вам нужен вертикальный размер, пропорциональный ширине, установленной в пикселях на охватывающем 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;
}

Вот решение с двумя div, которое не работает. Обратите внимание, что отступ 60% по вертикали пропорционален ширине окна, а не div.ptestширине:

http://jsfiddle.net/d85FM/

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

http://jsfiddle.net/mmq29/

Question 6

Этот ответ во многом такой же, как и другие, за исключением того, что я предпочитаю не использовать столько имен классов. Но это только личные предпочтения. Вы могли бы возразить, что использование имен классов в каждом 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, чтобы установить ширину и высоту (padding-top):

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

Question 7

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

Надеюсь, это кому-нибудь поможет!

Question 8

Вы можете использовать ширину просмотра, чтобы установить высоту. 100 vw - это 100% ширины. height: 60vw;сделает высоту 60% ширины.

Question 9

Один из способов полезен при работе с изображениями, но может использоваться как обходной путь в противном случае:

<html>
<head>
</head>
<style>
    #someContainer {
        width:50%;
        position: relative;
    }
    #par {
        width: 100%;
        background-color:red;
    }
    #image {
        width: 100%;
        visibility: hidden;
    }
    #myContent {
        position:absolute;
    }
</style>
<div id="someContainer">
    <div id="par">
        <div id="myContent">
            <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>    
        </div>
        <img src="yourImage" id="image"/>
    </div>
</div>
</html>

Чтобы использовать, замените yourImage URL-адресом вашего изображения. Вы используете изображение с желаемым соотношением ширины и высоты.

div id = "myContent" здесь как пример обходного пути, когда myContent будет накладываться на изображение.

Это работает так: родительский div будет соответствовать высоте изображения, высота изображения будет соответствовать ширине родительского элемента. Однако изображение скрыто.

Question 10

Вы можете назначить ширину и высоту элемента с помощью vwили vh. Например:

#anyElement {
    width: 20vh;
    height: 20vh;
}

Это установит ширину и высоту на 20% от текущей высоты браузера с сохранением соотношения сторон. Однако это работает, только если вы хотите масштабировать пропорционально размерам области просмотра.