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.

Answer 1

82

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

html css człowiek Pająk
źródło

3

Zobacz CSS: sposób na zachowanie proporcji podczas zmiany rozmiaru DIV?

thgaskell

4

możliwy duplikat CSS: sposób na zachowanie proporcji podczas zmiany rozmiaru DIV?

Qtax

Answer 2

3

Zobacz CSS: sposób na zachowanie proporcji podczas zmiany rozmiaru DIV?

thgaskell

Answer 3

4

możliwy duplikat CSS: sposób na zachowanie proporcji podczas zmiany rozmiaru DIV?

Qtax

Answer 4

125

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

Stefan H Singer
źródło

1

Ten CSS ma tu i ówdzie różne dziwne rzeczy. Niemniej jednak działa.

Ghasan,

1

Link do artykułu zniknął!

Sanxofon,

Muszę odmówić użycia tego tajemniczego kawałka czegokolwiek to jest!

Jacek Dziurdzikowski

Bardzo cenne byłoby wyjaśnienie. To naprawdę jest magia.

Palec

Względne położenie powoduje, że .imageContainer jest początkiem współrzędnych dla bezwzględnie pozycjonowanego obrazu wewnątrz. Float wydaje się nieistotny - ma sens tylko w kontekście, w którym chcę umieścić wiele takich .imageContainer obok siebie, aby utworzyć kafelki.

Palec

Answer 5

1

Ten CSS ma tu i ówdzie różne dziwne rzeczy. Niemniej jednak działa.

Ghasan,

Answer 6

1

Link do artykułu zniknął!

Sanxofon,

Answer 7

Muszę odmówić użycia tego tajemniczego kawałka czegokolwiek to jest!

Jacek Dziurdzikowski

Answer 8

Bardzo cenne byłoby wyjaśnienie. To naprawdę jest magia.

Palec

Answer 9

Względne położenie powoduje, że .imageContainer jest początkiem współrzędnych dla bezwzględnie pozycjonowanego obrazu wewnątrz. Float wydaje się nieistotny - ma sens tylko w kontekście, w którym chcę umieścić wiele takich .imageContainer obok siebie, aby utworzyć kafelki.

Palec

Answer 10

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

Answer 11

1

To działało tylko dla mnie również poprzez ustawienie height: 100%;w .content. Dzięki za wskazówkę. Ta metoda podoba mi się bardziej niż wypełnienie.

natec

Answer 12

Pytanie brzmi „używając CSS”, lepiej unikać dodawania nowych elementów do HTML

Diego Betto

Answer 13

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

Answer 14

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/

Answer 15

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

Answer 16

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!

Answer 17

3

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.

Joe Giusti
źródło

możesz napisać pełną odpowiedź, aby dać najlepszą opinię.

Amirhossein

Answer 18

możesz napisać pełną odpowiedź, aby dać najlepszą opinię.

Amirhossein

Answer 19

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.

Answer 20

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.

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

Odpowiedzi: