Responsive Änderung der Div-Größe unter Beibehaltung des Seitenverhältnisses [duplicate]

Lesezeit: 6 Minuten

Responsive Anderung der Div Grose unter Beibehaltung des Seitenverhaltnisses duplicate
ilyo

Wenn ich einem Bild nur eine prozentuale Breite oder Höhe gebe, wird es vergrößert / verkleinert, wobei das Seitenverhältnis beibehalten wird. Wenn ich jedoch den gleichen Effekt mit einem anderen Element erzielen möchte, ist es überhaupt möglich, die Breite und die Höhe mit einem Prozentsatz zusammenzubinden?

1646182326 176 Responsive Anderung der Div Grose unter Beibehaltung des Seitenverhaltnisses duplicate
Chris

Sie können dies mit reinem CSS tun; kein JavaScript erforderlich. Dies nutzt die (etwas kontraintuitive) Tatsache, dass padding-top Prozentsätze sind relativ zu den enthaltenden Blöcken Breite. Hier ist ein Beispiel:

.wrapper {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: deepskyblue;
  /* let's see it! */
  color: white;
}
<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>

  • Ich muss sagen, das ist großartig und funktioniert sogar im IE. groß +1

    – Petrus

    25. August 2012 um 11:03 Uhr


  • @IlyaD Schauen Sie sich das aus der CSS2-Spezifikation an: kleiner Link.

    – Chris

    25. August 2012 um 21:24 Uhr

  • Sie, mein Herr, haben das Internet gewonnen. Dies ist enorm, insbesondere für Hintergrundbilder in responsiven Designs. Danke!

    – Vidal Quevedo

    11. Oktober 2013 um 23:27 Uhr


  • Für mathematisch behinderte Menschen wie mich: Um den Prozentsatz der oberen Polsterung von etwas anderem als 16: 9-Verhältnissen zu berechnen, verwenden Sie diese Formel (z. B. unter Verwendung eines 22: 5-Verhältnisses, wobei 22 A und 5 B ist): B / (A / 100) = C%. 22:5 ist also 5 / 0,22 = 22,72 %.

    – Traumhändler

    14. März 2014 um 13:21 Uhr

  • So stellen Sie die vertikale Mitte ein <div class="main"> vom Körper?

    – Krunal Mevada

    21. September 2015 um 6:42 Uhr

Responsive Anderung der Div Grose unter Beibehaltung des Seitenverhaltnisses duplicate
Thomas Mulder

Eine weitere Option ist die Verwendung von Pseudoelementen, sodass Sie kein absolut positioniertes internes Element verwenden müssen, um Chris ‘Idee abzulehnen.

<style>
.square {
    /* width within the parent.
       can be any percentage. */
    width: 100%;
}
.square:before {
    content: "";
    float: left;

    /* essentially the aspect ratio. 100% means the
       div will remain 100% as tall as it is wide, or
       square in other words.  */
    padding-bottom: 100%;
}
/* this is a clearfix. you can use whatever
   clearfix you usually use, add
   overflow:hidden to the parent element,
   or simply float the parent container. */
.square:after {
    content: "";
    display: table;
    clear: both;
}
</style>
<div class="square">
  <h1>Square</h1>
  <p>This div will maintain its aspect ratio.</p>
</div>

Ich habe hier eine Demo zusammengestellt: http://codepen.io/tcmulder/pen/iqnDr


BEARBEITEN:

Nun, wenn ich von Isaacs Idee abkomme, ist es in modernen Browsern einfacher, einfach vw-Einheiten zu verwenden, um das Seitenverhältnis zu erzwingen (obwohl ich nicht auch vh verwenden würde, wie er es tut, oder das Seitenverhältnis sich basierend auf der Fensterhöhe ändert).

Das vereinfacht also die Sache:

<style>
.square {
    /* width within the parent (could use vw instead of course) */
    width: 50%;
    /* set aspect ratio */
    height: 50vw;
}
</style>
<div class="square">
  <h1>Square</h1>
  <p>This div will maintain its aspect ratio.</p>
</div>

Ich habe hier eine modifizierte Demo zusammengestellt: https://codepen.io/tcmulder/pen/MdojRG?editors=1100

Sie können auch max-height, max-width und/oder min-height, min-width festlegen, wenn Sie nicht möchten, dass es lächerlich groß oder klein wird, da es jetzt auf der Breite des Browsers basiert und nicht auf dem Container und dem Willen unendlich wachsen/schrumpfen.

Beachten Sie, dass Sie den Inhalt innerhalb des Elements auch skalieren können, wenn Sie die Schriftgröße auf ein vw-Maß und alle Innereien auf em-Maß einstellen, und hier ist eine Demo dafür: https://codepen.io/tcmulder/pen/VBJqLV?editors=1100

  • Das ist fantastisch, da Sie kein Verpackungselement benötigen. Gute Arbeit!

    – Jim Buck

    20. Juli 2016 um 16:17 Uhr

  • Wie kann ich verhindern, dass der untergeordnete Inhalt die Höhe des übergeordneten Inhalts erweitert?

    – Jacob Raccuia

    23. Juni 2017 um 17:09 Uhr

  • Ich konnte diese kürzere Methode in IE10 nicht zum Laufen bringen

    – Cyberwombat

    28. September 2017 um 16:53 Uhr

  • Ja, das funktioniert nicht, wenn das Kind das Elternteil erweitern kann.

    – Benutzer541686

    22. Juni 2019 um 22:24 Uhr

  • Anstatt den Clearfix-Hack zu verwenden, können Sie display: flow-root oder contains: content auf dem .square-Element verwenden: codepen.io/fcalderan/pen/xxRPwgL

    – Fabrizio Calderán

    9. März 2021 um 9:34 Uhr

<style>
#aspectRatio
{
  position:fixed;
  left:0px;
  top:0px;
  width:60vw;
  height:40vw;
  border:1px solid;
  font-size:10vw;
}
</style>
<body>
<div id="aspectRatio">Aspect Ratio?</div>
</body>

Das Wichtigste, was hier zu beachten ist vw = Ansichtsfensterbreite und vh = Höhe des Ansichtsfensters

  • Nur eine Anmerkung, dass, wenn das Seitenverhältnis des Bildschirms unterschiedlich ist, das Seitenverhältnis des Elements unterschiedlich ist und das Seitenverhältnis verloren geht.

    – Ryan Killeen

    30. September 2015 um 1:08 Uhr

  • @RyanKilleen, außer es sieht so aus, als würde er “vw” sowohl für die Breite als auch für die Höhe verwenden. Der Prozentsatz hat also immer noch das gleiche Seitenverhältnis.

    – Christophbaumwolle

    1. Oktober 2015 um 2:44 Uhr

  • @christophercotton …. das bekomme ich zum Abschöpfen. Du hast Recht.

    – Ryan Killeen

    1. Oktober 2015 um 14:00 Uhr

Das ist meine Lösung

<div class="main" style="width: 100%;">
    <div class="container">
        <div class="sizing"></div>
        <div class="content"></div>
    </div>
</div>

.main {
    width: 100%;
}
.container {
    width: 30%;
    float: right;
    position: relative;
}
.sizing {
    width: 100%;
    padding-bottom: 50%;
    visibility: hidden;
}
.content {
    width: 100%;
    height: 100%;
    background-color: red;
    position: absolute;
    margin-top: -50%;
}

http://jsfiddle.net/aG4Fs/3/

1646182328 426 Responsive Anderung der Div Grose unter Beibehaltung des Seitenverhaltnisses duplicate
Peter

(function( $ ) {
  $.fn.keepRatio = function(which) {
      var $this = $(this);
      var w = $this.width();
      var h = $this.height();
      var ratio = w/h;
      $(window).resize(function() {
          switch(which) {
              case 'width':
                  var nh = $this.width() / ratio;
                  $this.css('height', nh + 'px');
                  break;
              case 'height':
                  var nw = $this.height() * ratio;
                  $this.css('width', nw + 'px');
                  break;
          }
      });

  }
})( jQuery );      

$(document).ready(function(){
    $('#foo').keepRatio('width');
});

Arbeitsbeispiel: http://jsfiddle.net/QtftX/1/

  • Das ist toll! Ich verwende dieses Skript jedoch, wenn ich es auf mehreren DIVs verwende und sie jeweils unterschiedliche Höhen haben … sobald das Skript einsetzt, passt es alle Höhen so an, dass sie gleich sind … Ich kann nicht herausfinden, warum! Irgendwelche Ideen? Ich möchte das Seitenverhältnis wie in diesem Skript beibehalten, aber die unterschiedlichen Höhen für jedes beibehalten.

    – Michael Giovanni Pumo

    2. Oktober 2013 um 9:52 Uhr

  • Weil die Funktion für eine Menge von Elementen galt. Das Skript sollte jedes Element separat behandeln. Hier ist der aktualisierte Code: jsfiddle.net/QtftX/100

    – onetdev

    23. November 2013 um 10:41 Uhr


  • Wenn Sie die Seite aktualisieren, werden Breite und Höhe wieder zurückgesetzt. Wie können Sie dies blockieren?

    – Gilko

    24. April 2014 um 15:05 Uhr

  • Dies funktioniert nicht unter iOS

    – Brian

    2. Juni 2014 um 20:19 Uhr

  • Das ist toll! Ich verwende dieses Skript jedoch, wenn ich es auf mehreren DIVs verwende und sie jeweils unterschiedliche Höhen haben … sobald das Skript einsetzt, passt es alle Höhen so an, dass sie gleich sind … Ich kann nicht herausfinden, warum! Irgendwelche Ideen? Ich möchte das Seitenverhältnis wie in diesem Skript beibehalten, aber die unterschiedlichen Höhen für jedes beibehalten.

    – Michael Giovanni Pumo

    2. Oktober 2013 um 9:52 Uhr

  • Weil die Funktion für eine Menge von Elementen galt. Das Skript sollte jedes Element separat behandeln. Hier ist der aktualisierte Code: jsfiddle.net/QtftX/100

    – onetdev

    23. November 2013 um 10:41 Uhr


  • Wenn Sie die Seite aktualisieren, werden Breite und Höhe wieder zurückgesetzt. Wie können Sie dies blockieren?

    – Gilko

    24. April 2014 um 15:05 Uhr

  • Dies funktioniert nicht unter iOS

    – Brian

    2. Juni 2014 um 20:19 Uhr

906630cookie-checkResponsive Änderung der Div-Größe unter Beibehaltung des Seitenverhältnisses [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy