Czy mogę skalować wysokość elementu div proporcjonalnie do jego szerokości za pomocą CSS?

Question 1

Czy mogę ustawić dowolną zmienną w CSS, tak jak chcę, aby wysokość mojego elementu div była zawsze równa połowie szerokości moje skale div z rozmiarem ekranu szerokość elementu div wyrażona jest w procentach

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

CSS:

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

Ta 30% szerokość skaluje się z rozdzielczością ekranu

Question 2

Możesz to zrobić za pomocą dopełnienia elementu nadrzędnego, ponieważ wypełnienie względne (nawet pod względem wysokości) jest oparte na szerokości elementu nadrzędnego.

CSS:

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

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

Jest to oparte na tym artykule: Proporcjonalne skalowanie responsywnych pól przy użyciu tylko CSS

Question 3

Innym świetnym sposobem na osiągnięcie tego jest użycie przezroczystego obrazu o ustawionym współczynniku proporcji. Następnie ustaw szerokość obrazu na 100%, a wysokość na auto. To niestety spowoduje obniżenie pierwotnej zawartości pojemnika. Musisz więc umieścić oryginalną zawartość w innym elemencie div i umieścić go absolutnie na górze nadrzędnego elementu 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

Możesz użyć szerokości widoku jako „szerokości” i ponownie połowy szerokości widoku jako „wysokości”. W ten sposób masz zagwarantowane właściwe proporcje niezależnie od rozmiaru widocznego obszaru.

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

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

Skrzypce

Question 5

Jeśli chcesz, aby rozmiar pionowy był proporcjonalny do szerokości ustawionej w pikselach w otaczającym elemencie div, uważam, że potrzebujesz dodatkowego elementu, na przykład:

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

Oto rozwiązanie 2 div, które nie działa. Zwróć uwagę, że dopełnienie w pionie 60% jest proporcjonalne do szerokości okna, a nie div.ptestszerokości:

http://jsfiddle.net/d85FM/

Oto przykład z powyższym kodem, który działa:

http://jsfiddle.net/mmq29/

Question 6

Ta odpowiedź jest bardzo podobna do innych, z wyjątkiem tego, że wolę nie używać tylu nazw klas. Ale to tylko osobiste preferencje. Można argumentować, że używanie nazw klas w każdym elemencie div jest bardziej przejrzyste, ponieważ z góry deklaruje cel zagnieżdżonych elementów div.

<div id="MyDiv" class="proportional">
  <div>
    <div>
      <p>Content</p>
    </div>
  </div>
</div>

Oto ogólny CSS:

.proportional { position:relative; }
.proportional > div > div { position:absolute; top:0px; bottom:0px; left:0px; right:0px; }

Następnie skieruj na pierwszy wewnętrzny element div, aby ustawić szerokość i wysokość (padding-top):

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

Question 7

Dla każdego, kto szuka skalowalnego rozwiązania: napisałem małe narzędzie pomocnicze w SASS, aby generować responsywne proporcjonalne prostokąty dla różnych punktów przerwania. Spójrz na proporcje SASS

Mam nadzieję, że to pomoże każdemu!

Question 8

Możesz użyć szerokości widoku, aby ustawić wysokość. 100 vw to 100% szerokości. height: 60vw;sprawi, że wysokość będzie 60% szerokości.

Question 9

Jeden ze sposobów przydatny podczas pracy z obrazami, ale można go użyć jako obejścia w przeciwnym razie:

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

Aby użyć zamień yourImage na adres URL obrazu. Używasz obrazu o pożądanym stosunku szerokości do wysokości.

div id = "myContent" jest tutaj przykładem obejścia, w którym myContent nakłada się na obraz.

Działa to tak: Nadrzędny element div dostosuje się do wysokości obrazu, wysokość obrazu zostanie dostosowany do szerokości elementu nadrzędnego. Jednak obraz jest ukryty.

Question 10

Możesz przypisać zarówno szerokość, jak i wysokość elementu, używając jednego z nich vw albo vh. Na przykład:

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

Spowoduje to ustawienie zarówno szerokości, jak i wysokości na 20% bieżącej wysokości przeglądarki, zachowując współczynnik proporcji. Jednak działa to tylko wtedy, gdy chcesz skalować proporcjonalnie do wymiarów rzutni.