Beibehaltung des Seitenverhältnisses eines Divs mit CSS

Question

Ich möchte eine div die ihre Breite/Höhe ändern kann, wenn sich die Breite des Fensters ändert.

Gibt es CSS3-Regeln, mit denen sich die Höhe entsprechend der Breite ändern kann? unter Beibehaltung seines Seitenverhältnisses ?

Ich weiß, dass ich dies über JavaScript tun kann, aber ich würde es vorziehen, nur CSS zu verwenden.

Answer 1

Elliot hat mich zu dieser Lösung inspiriert - danke:

aspectratio.png ist eine vollständig transparente PNG-Datei mit der Größe des von Ihnen bevorzugten Seitenverhältnisses, in meinem Fall 30x10 Pixel.

HTML

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

Bitte beachten Sie: background-size ist ein css3-Merkmal, das bei Ihren Zielbrowsern möglicherweise nicht funktioniert. Sie können die Interoperabilität überprüfen (z. B. auf caniuse.com ).

Answer 2

Da @web-tiki bereits einen Weg aufzeigt, wie man vh / vw Ich brauche auch eine Möglichkeit, den Bildschirm zu zentrieren, hier ist ein Codeschnipsel für 9:16 Porträt.

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateY wird dieses Zentrum auf dem Bildschirm bleiben. calc(100vw * 16 / 9) ist die erwartete Höhe für 9/16. (100vw * 16 / 9 - 100vh) ist die Überlaufhöhe, also nach oben ziehen overflow height/2 wird es in der Mitte des Bildschirms gehalten.

Für Landschaft, und halten 16:9 zeigen Sie die Verwendung

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

Das Verhältnis 9/16 ist einfach zu ändern, keine Notwendigkeit, vordefiniert 100:56.25 o 100:75 Wenn Sie zuerst die Höhe sicherstellen wollen, sollten Sie Breite und Höhe vertauschen, z. B. height:100vh;width: calc(100vh * 9 / 16) für 9:16 Porträt.

Wenn Sie das Programm an eine andere Bildschirmgröße anpassen möchten, könnte es Sie auch interessieren

• Hintergrund-Größe abdecken/behalten
  • Der obige Stil ist ähnlich wie "contain" und hängt vom Verhältnis Breite:Höhe ab.
• passendes Objekt
  • Cover/Contain für Bild/Video-Tag
• @media (orientation: portrait) / @media (orientation: landscape)
  • Medienabfrage für portrait / landscape um das Verhältnis zu ändern.

Answer 3

2021 AKTUALISIERUNG - CSS ASPEKTVERHÄLTNIS EIGENTUM

Nun, wir haben kürzlich die Möglichkeit erhalten, die aspect-ratio Eigenschaft in CSS.

https://twitter.com/Una/status/1260980901934137345/photo/1

Hinweis: Der Support ist noch nicht der beste ...

HINWEIS: Die Unterstützung ist ziemlich gut!

https://caniuse.com/#search=aspect-ratio

EDIT: Das Seitenverhältnis ist jetzt verfügbar!

https://web.dev/aspect-ratio/

Wenn Sie daran interessiert sind, wie man es verwendet, sehen Sie sich das folgende, sehr einfache Beispiel an

    .yourClass {
       aspect-ratio: 4/3;
    }

Answer 4

Wie in hier auf w3schools.com und in gewisser Weise wiederholt in diesem akzeptierte Antwort , die Werte als Prozentsätze auffüllen (Hervorhebung von mir):

Legt die Auffüllung in Prozent der Breite des Feldes enthaltendes Element

Ein korrektes Beispiel für ein responsives DIV, das ein Seitenverhältnis von 16:9 beibehält, lautet also wie folgt:

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

Demo auf JSFiddle

Answer 5

Um die Antwort von Web_Designer zu ergänzen: Die <div> hat eine Höhe (die vollständig aus dem unteren Padding besteht) von 75 % der Breite des enthaltendes Element . Hier ist eine gute Zusammenfassung: http://mattsnider.com/css-using-percent-for-margin-and-padding/ . Ich bin mir nicht sicher, warum das so ist, aber so ist es nun einmal.

Wenn Ihr div eine andere Breite als 100 % haben soll, benötigen Sie ein weiteres umschließendes div, für das Sie die Breite festlegen:

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

Ich habe etwas Ähnliches wie Elliot's Bild Trick vor kurzem, damit ich CSS Media Queries verwenden, um eine andere Logo-Datei je nach Gerät Auflösung dienen, aber immer noch proportional skalieren als ein <img> würde natürlich reichen (ich habe das Logo als Hintergrundbild auf ein transparentes .png mit dem richtigen Seitenverhältnis eingestellt). Aber die Lösung von Web_Designer würde mir eine http-Anfrage ersparen.