Могу ли я масштабировать высоту div пропорционально его ширине, используя CSS? - PullRequest
Новая
       0

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

65 голосов
/ 17 января 2012

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

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

CSS: 

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

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

Ответы [ 7 ]

108 голосов
/ 15 февраля 2013

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

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/

13 голосов
/ 20 февраля 2016

Еще один отличный способ сделать это - использовать прозрачное изображение с заданным соотношением сторон.Затем установите ширину изображения на 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;
}
5 голосов
/ 13 февраля 2014

Если вы хотите, чтобы размер по вертикали был пропорционален ширине, заданной в пикселях для вложенного 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/

2 голосов
/ 19 мая 2017

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

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

2 голосов
/ 12 февраля 2017

Этот ответ во многом такой же, как и другие, за исключением того, что я предпочитаю не использовать столько имен классов.Но это только личные предпочтения.Вы можете утверждать, что использование имен классов в каждом 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%; }
1 голос
/ 14 декабря 2018

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

<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>

Для использования замените вашImage на ваш URL изображения. Вы используете изображение с желаемым соотношением ширина / высота.

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

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

0 голосов
/ 01 июля 2019

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

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

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

Fiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...