wake-up-neo.net

Ändern Sie die Div-Größe unter Beibehaltung des Seitenverhältnisses

Wenn ich einem Bild nur eine prozentuale Breite oder Höhe gebe, wird es unter Beibehaltung des Seitenverhältnisses vergrößert/verkleinert. 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 Prozentwerten zu verknüpfen?

htmlcssresponsive-design
214
ilyo

Sie können dies mit reinem CSS tun. kein JavaScript erforderlich. Dies nutzt die (etwas eingängige) Tatsache, dass padding-top Prozentangaben beziehen sich auf die Breite des enthaltenen Blocks . 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>
528
Chris

Eine andere Option, die Chris 'Idee zunichte macht, ist die Verwendung von Pseudoelementen, sodass Sie kein absolut positioniertes internes Element verwenden müssen.

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

Nach Isaacs Idee ist es in modernen Browsern einfacher, vw-Einheiten zu verwenden, um das Seitenverhältnis zu erzwingen (obwohl ich vh nicht so verwenden würde, wie er es tut, da sich das Seitenverhältnis je nach Fensterhöhe ändert).

Das vereinfacht die Dinge:

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

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 auf der aktuellen Breite des Browsers und nicht auf dem Container und dem Willen basiert auf unbestimmte Zeit wachsen/schrumpfen.

Beachten Sie, dass Sie den Inhalt innerhalb des Elements auch skalieren können, wenn Sie die Schriftgröße auf eine vw-Messung und alle Innereien auf em-Messungen festlegen. Hier finden Sie eine Demo dazu: https://codepen.io/tcmulder/pen/VBJqLV? Editor = 11

44
Tomas Mulder
<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, das Sie hier beachten müssen, ist vw = Breite des Ansichtsfensters und vh = Höhe des Ansichtsfensters

30
Isaac

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/

3
Mykyta Shyrin
(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/

2
Peter