Чи можу я масштабувати висоту 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;
}

Ось рішення 2 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

Сподіваюся, це комусь допоможе!

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 на адресу вашого зображення. Ви використовуєте зображення із бажаним співвідношенням ширини / висоти.

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

Це працює так: Батьківський div приймає до висоти зображення, висота зображення до ширини батьківського. Однак зображення приховане.

Question 10

Ви можете призначити як ширину, так і висоту елемента, використовуючи vwабо vh. Наприклад:

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

Це встановить як ширину, так і висоту 20% від поточної висоти браузера, зберігаючи пропорції. Однак це працює лише в тому випадку, якщо потрібно масштабувати пропорційно розмірам області перегляду.