Могу ли я масштабировать высоту 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% от текущей высоты браузера с сохранением соотношения сторон. Однако это работает, только если вы хотите масштабировать пропорционально размерам области просмотра.

Answer 1

81

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

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

CSS:

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

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

html css человек-паук
источник

3

См. CSS: способ сохранить соотношение сторон при изменении размера DIV?

thgaskell

4

возможный дубликат CSS: способ сохранить соотношение сторон при изменении размера DIV?

Qtax

Answer 2

3

См. CSS: способ сохранить соотношение сторон при изменении размера DIV?

thgaskell

Answer 3

4

возможный дубликат CSS: способ сохранить соотношение сторон при изменении размера DIV?

Qtax

Answer 4

124

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

CSS:

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

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

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

Стефан Х Зингер
источник

1

В этом CSS есть много странных вещей тут и там. Тем не менее, это работает.

Гасан

1

Ссылка на статью исчезла!

Sanxofon

Я должен отказаться от использования этого таинственного предмета, каким бы он ни был!

Jacek Dziurdzikowski

Объяснение было бы очень признательно. Это действительно волшебство.

Palec

Относительное положение приводит к тому, что .imageContainer является началом координат для абсолютно позиционированного img внутри. Float кажется неуместным - это имеет смысл только в контексте, когда я хочу разместить несколько таких .imageContainer рядом друг с другом, чтобы сформировать плитки.

Palec

Answer 5

1

В этом CSS есть много странных вещей тут и там. Тем не менее, это работает.

Гасан

Answer 6

1

Ссылка на статью исчезла!

Sanxofon

Answer 7

Я должен отказаться от использования этого таинственного предмета, каким бы он ни был!

Jacek Dziurdzikowski

Answer 8

Объяснение было бы очень признательно. Это действительно волшебство.

Palec

Answer 9

Относительное положение приводит к тому, что .imageContainer является началом координат для абсолютно позиционированного img внутри. Float кажется неуместным - это имеет смысл только в контексте, когда я хочу разместить несколько таких .imageContainer рядом друг с другом, чтобы сформировать плитки.

Palec

Answer 10

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

1

Это работало только для меня также установив height: 100%;в .content. Тем не менее, спасибо за совет. Мне этот метод нравится больше, чем заполнение.

natec

Answer 12

Вопрос в том, чтобы «использовать CSS», лучше избегать добавления новых элементов в HTML

Диего Бетто

Answer 13

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

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

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

Скрипка

Answer 14

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

Answer 15

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

Answer 16

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

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

Answer 17

3

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

Джо Джусти
источник

вы можете написать полный ответ, чтобы дать лучший отзыв.

Amirhossein

Answer 18

вы можете написать полный ответ, чтобы дать лучший отзыв.

Amirhossein

Answer 19

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

<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 будет соответствовать высоте изображения, высота изображения будет соответствовать ширине родительского элемента. Однако изображение скрыто.

Answer 20

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

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

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

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

Ответы: