Могу ли я установить любую переменную в CSS, так как я хочу, чтобы моя высота div всегда была половиной ширины, мои div-шкалы с шириной размера экрана для div в процентах
<div class="ss"></div>
CSS
.ss {
width:30%;
height: half of the width;
}
Эта ширина ширины 30% с разрешением экрана
Вы можете сделать это с помощью заполнения для родительского элемента, потому что относительное заполнение (даже по высоте) основано на ширине родительского элемента.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
Это основано на этой статье: Пропорциональное масштабирование адаптивных блоков с использованием только CSS
Еще один отличный способ добиться этого - использовать прозрачное изображение с установленным соотношением сторон. Затем установите ширину изображения на 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;
}
Если вам нужен вертикальный размер, пропорциональный ширине, заданной в пикселях на закрывающем 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:
Вот пример с приведенным выше кодом, который работает:
Этот ответ почти такой же, как и другие, за исключением того, что я предпочитаю не использовать столько имен классов. Но это только личное предпочтение. Вы можете утверждать, что использование имен классов в каждом 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%; }
Для тех, кто ищет масштабируемое решение: я написал небольшую вспомогательную утилиту в SASS для создания чувствительных пропорциональных прямоугольников для разных точек останова. Взгляните на SASS Proportions
Надеюсь, это поможет любому!
Один способ полезен при работе с изображениями, но в противном случае может использоваться как обходной путь:
<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 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>
Для использования замените вашImage на ваш URL изображения. Вы используете изображение с желаемым соотношением ширины и высоты.
div id = "myContent" приведен здесь в качестве примера обходного пути, когда myContent будет накладываться на изображение.
Это работает так: родительский div будет соответствовать высоте изображения, высота изображения будет соответствовать ширине родительского элемента. Однако изображение скрыто.
Вы можете использовать View Width для "ширины" и снова половину View Width для "высоты". Таким образом, вам гарантируется правильное соотношение независимо от размера области просмотра.
<div class="ss"></div>
.ss
{
width: 30vw;
height: 15vw;
}