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

80

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

html css Spider Man
quelle
3
Siehe CSS: Eine Möglichkeit, das Seitenverhältnis beim Ändern der Größe eines DIV beizubehalten?
Thgaskell
4
Mögliches Duplikat von CSS: Eine Möglichkeit, das Seitenverhältnis beim Ändern der Größe eines DIV beizubehalten?
Qtax

Antworten:

120

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

Stefan H Sänger
quelle
1
Dieses CSS hat hier und da alle möglichen seltsamen Dinge. Trotzdem funktioniert es.
Ghasan
1
Artikel Link ist weg!
Sanxofon
Ich muss mich weigern, dieses mysteriöse Stück von allem zu benutzen, was es ist!
Jacek Dziurdzikowski
Erklärung wäre sehr dankbar. Das ist wirklich Magie.
Palec
Die relative Position bewirkt, dass .imageContainer der Koordinatenursprung für absolut positioniertes Bild im Inneren ist. Float scheint irrelevant - ist nur in dem Kontext sinnvoll, in dem ich mehrere solcher .imageContainer nebeneinander platzieren möchte, um Kacheln zu bilden.
Palec
15

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;
}
jdavis
quelle
1
Dies ist nur für mich gearbeitet , indem auch Einstellung height: 100%;in .content. Danke für den Tipp. Ich mag diese Methode besser als Polsterung.
Natec
Die Frage lautet "Verwenden von CSS", um das Hinzufügen neuer Elemente zu HTML zu vermeiden
Diego Betto
9

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

GDavoli
quelle
6

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/

zlovelady
quelle
3

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%; }
Lee Gunn
quelle
3

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!

BrunoFenzl
quelle
3

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.

Joe Giusti
quelle
Sie können eine vollständige Antwort schreiben, um das beste Feedback zu erhalten.
Amirhossein
2

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.

Skulio
quelle
1

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.

d13
quelle