Kann ich die Höhe eines Divs mithilfe von CSS proportional zu seiner Breite skalieren?

Question 1

Kann ich eine beliebige Variable in CSS so einstellen, dass meine Div-Höhe immer die Hälfte der Breite beträgt? Meine Div-Skalierung mit der Bildschirmgröße für Div ist in Prozent

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

CSS:

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

Diese 30% Breite skaliert mit der Bildschirmauflösung

Question 2

Sie können dies mithilfe des Auffüllens eines übergeordneten Elements tun, da das relative Auffüllen (auch in Bezug auf die Höhe) auf der Breite des übergeordneten Elements basiert.

CSS:

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

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

Dies basiert auf diesem Artikel: Proportionale Skalierung von responsiven Boxen mit nur CSS

Question 3

Eine weitere Möglichkeit, dies zu erreichen, besteht darin, ein transparentes Bild mit einem festgelegten Seitenverhältnis zu verwenden. Stellen Sie dann die Breite des Bildes auf 100% und die Höhe auf Auto ein. Das wird leider den ursprünglichen Inhalt des Containers nach unten drücken. Sie müssen also den ursprünglichen Inhalt in ein anderes Div einschließen und ihn absolut oben auf dem übergeordneten Div positionieren.

<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

Sie können die Ansichtsbreite für die "Breite" und erneut die Hälfte der Ansichtsbreite für die "Höhe" verwenden. Auf diese Weise erhalten Sie unabhängig von der Größe des Ansichtsfensters das richtige Verhältnis.

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

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

Geige

Question 5

Wenn Sie eine vertikale Größe proportional zu einer Breite in Pixel auf einem umschließenden Div wünschen, benötigen Sie meines Erachtens ein zusätzliches Element wie das folgende:

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

Hier ist die 2-Div-Lösung, die nicht funktioniert. Beachten Sie, dass die vertikale Polsterung von 60% proportional zur Fensterbreite ist, nicht zur div.ptestBreite:

http://jsfiddle.net/d85FM/

Hier ist das Beispiel mit dem obigen Code, das funktioniert:

http://jsfiddle.net/mmq29/

Question 6

Diese Antwort ist ähnlich wie bei anderen, außer dass ich lieber nicht so viele Klassennamen verwende. Aber das ist nur eine persönliche Präferenz. Sie könnten argumentieren, dass die Verwendung von Klassennamen für jedes Div transparenter ist, da der Zweck der verschachtelten Divs im Voraus erklärt wird.

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

Hier ist das generische CSS:

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

Zielen Sie dann auf das erste innere Div, um Breite und Höhe einzustellen (Polsterung oben):

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

Question 7

Für alle, die nach einer skalierbaren Lösung suchen: Ich habe ein kleines Hilfsprogramm in SASS geschrieben, um reaktionsfähige proportionale Rechtecke für verschiedene Haltepunkte zu generieren. Schauen Sie sich SASS Proportions an

Hoffe es hilft jedem!

Question 8

Sie können die Ansichtsbreite verwenden, um die Höhe festzulegen. 100 vw sind 100% der Breite. height: 60vw;würde die Höhe 60% der Breite machen.

Question 9

Ein nützlicher Weg, wenn Sie mit Bildern arbeiten, kann aber ansonsten als Problemumgehung verwendet werden:

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

Um zu verwenden, ersetzen Sie yourImage durch Ihre Bild-URL. Sie verwenden ein Bild mit dem gewünschten Breiten- / Höhenverhältnis.

div id = "myContent" ist hier als Beispiel für eine Problemumgehung, bei der myContent das Bild überlagert.

Dies funktioniert wie folgt: Übergeordnetes div wird an die Höhe des Bildes angepasst, Bildhöhe wird an die Breite des übergeordneten Bilds angepasst. Das Bild ist jedoch ausgeblendet.

Question 10

Sie können sowohl die Breite als auch die Höhe des Elements mit entweder vwoder zuweisen vh. Zum Beispiel:

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

Dies würde sowohl die Breite als auch die Höhe auf 20% der aktuellen Höhe des Browsers einstellen und das Seitenverhältnis beibehalten. Dies funktioniert jedoch nur, wenn Sie proportional zu den Abmessungen des Ansichtsfensters skalieren möchten.