Seitenverhältnis mit minimaler/maximaler Höhe/Breite beibehalten?

Lesezeit: 1 Minute

Benutzer-Avatar
Panthro

Ich habe eine Galerie auf meiner Website, wo Benutzer Bilder hochladen können.

Ich möchte, dass die Bilder in einem Div sitzen, das seine Höhe beibehält, die Bilder sollten nicht größer als 500 Pixel sein. Die Breite sollte automatisch sein, um das Seitenverhältnis beizubehalten.

HTML:

<div id="gallery">
    <img src="https://stackoverflow.com/questions/27094771/uploads/my-dynamic-img.jpg">
</div>

Ich habe dieses CSS ausprobiert:

#gallery{
    height: 500px;

    img{
        max-height: 500px;
        max-width: 100%;
    }
}

Das obige funktioniert gut, die Galerie ist immer 500 Pixel hoch und Bilder überschreiten nie eine Höhe von 500 Pixel. Ich habe jedoch Probleme mit kleineren Bildern. Wenn ein Benutzer ein wirklich kleines Bild hochlädt, möchte ich, dass es auf mindestens 200 Pixel “aufgeblasen” wird. Ich weiß, dass dies erreicht werden kann, indem man a einstellt min-height Auf dem Bild ist das Problem dabei, wenn das Bild weniger als 200 Pixel hoch, aber sagen wir 2000 Pixel breit ist, wird das Bild auf 200 Pixel hoch gesprengt, aber dann wird das Seitenverhältnis geschraubt, da das Bild breiter ist als das Bilder übergeordnete div.

Wie kann ich eine Mindesthöhe haben, aber das Seitenverhältnis beibehalten?

  • Das ist keine CSS-Syntax – verwenden Sie eine Sprache wie SASS oder Stylus oder ist das nur ein Fehler?

    – Semikolon

    23. November 2014 um 22:00 Uhr

  • Das erste, was mir in den Sinn kommt, ist die Verwendung von Hintergrundbildern mit Hintergrundgröße: enthalten, aber das würde nicht funktionieren, wenn Sie <= IE8 abdecken müssen.

    – Semikolon

    23. November 2014 um 22:06 Uhr

  • Wenn Sie die Kontrolle über die HTML-Ausgabe haben, verwenden Sie die serverseitige Verarbeitung, um das Seitenverhältnis zu bestimmen, fügen Sie dann eine “Wide”- oder “Tall”-Klasse hinzu und handhaben Sie deren Styling separat. Wenn Sie keine Kontrolle über HTML haben, verwenden Sie Javascript, um dasselbe zu tun, und formatieren Sie sie erneut separat.

    – achtsame Stille

    29. Januar 2017 um 4:14 Uhr

Die gesuchte Immobilie ist object-fit. Dies ist eine der Innovationen von Opera, Sie können mehr darüber in ihrem lesen Entwicklerartikel von 2011 über Objektanpassung (ja, das gibt es schon so lange). Vor ein paar Jahren hätte ich es dir nicht empfehlen können, aber caniuse zeigt, dass alle anderen aufholen:

  • Opera 10.6-12.1 (Präfix -o-)
  • Chrom 31+
  • Oper 19+
  • Safari 7.1+
  • iOS 8+
  • Android 4.4+

http://caniuse.com/#search=object-fit

#gallery img {
    -o-object-fit: contain;
    object-fit: contain;
}

Mit einem Wert von contain zwingt das Bild, sein Seitenverhältnis in jedem Fall beizubehalten.

Alternativ können Sie stattdessen Folgendes verwenden:

#gallery img {
    -o-object-fit: cover;
    object-fit: cover;
    overflow: hidden;
}

http://sassmeister.com/gist/9b130efdae95bfa4338e

  • Ab Microsoft Edge ist dies noch nicht implementiert. Sie geben jedoch an, dass es für Edge in Betracht gezogen wird. https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/

    – brfan

    8. November 2016 um 17:35 Uhr


  • Ein Problem bei dieser Sullotion besteht darin, dass sie nur das eigentliche Bild und nicht das img-Tag dazu zwingt, Proportionen zu enthalten. Wenn Sie also beispielsweise einen Rahmen um das Bild-Tag legen, werden die Proportionen nicht beibehalten: jsfiddle.net/pwxca5af

    – Karl Papworth

    4. Januar 2017 um 14:29 Uhr


  • Vielen Dank! Es funktioniert perfekt, wenn Sie Orte definieren möchten, an denen ein Bild sein wird, aber Sie es wegen Netzwerkverzögerung noch nicht geladen haben. Ich kombiniere es mit Lazy Load auf einem großen Raster von 4×20 Bildelementen.

    – gtamboro

    16. November 2018 um 10:45 Uhr

  • @brsfan es scheint, dass Edge heute Object-Fit implementiert hat. Es klappt!

    – gtamboro

    16. November 2018 um 10:48 Uhr

Die einzige Möglichkeit, die ich kenne, um dies möglicherweise zu erreichen, besteht darin, entweder die width oder height zu auto.

#gallery{
    height: 500px;

    img{
        max-height: 500px;
        width: auto;
    }
}

Benutzer-Avatar
Rick Hitchcock

Ich weiß nicht, ob dies nur mit CSS möglich ist.

Möglicherweise können Sie dasselbe jedoch mit ein paar Zeilen JavaScript erreichen:

var img= document.querySelectorAll('img');
for(var i = 0 ; i < img.length ; i++) {
  img[i].onload= function() {
    var h= this.naturalHeight;
    h= Math.min(500,Math.max(200,h));
    this.style.height= h+'px';
  }
}

Dadurch wird die Höhe aller Bilder auf zwischen 200 und 500 Pixel festgelegt. Die Breite wird automatisch skaliert.

var img= document.querySelectorAll('img');
for(var i = 0 ; i < img.length ; i++) {
  img[i].onload= function() {
    var h= this.naturalHeight;
    h= Math.min(500,Math.max(200,h));
  }
}
#gallery{
  height: 500px;
  width: 400px;
  overflow: hidden;
}
<div id="gallery">
  <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo-med.png">

</div>

  • Ich habe ausgelassen this.naturalHeight aus meinem ursprünglichen post, also wäre die bildhöhe immer entweder 200px oder 500px. Jetzt kann es Werte dazwischen annehmen.

    – Rick Hitchcock

    23. November 2014 um 23:04 Uhr

Benutzer-Avatar
walisisch

Eigentlich wollte ich etwas Ähnliches machen. Hier ist etwas in jQuery, wenn Sie darauf stehen.

SCSS:

#gallery {
  height: 500px;

  img {
    max-height: 100%;
  }

  .small {
    width: 100%;
    max-width: 500px;
    height: auto;
  }

  .regular {
    width: auto;
    min-height: 200px;
  }
}

jQuery:

$( 'img' ).each( function() {

  var imageWidth = parseFloat( $( this ).css( 'width' ) );
  var imageHeight = parseFloat( $( this ).css( 'height' ) );

  if( imageHeight <= 200 && imageWidth >= 200 ) {
    $( this ).addClass( 'small' );
  }
  else {
    $( this ).addClass( 'regular' );
  }
});

CodePen

1071010cookie-checkSeitenverhältnis mit minimaler/maximaler Höhe/Breite beibehalten?

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

Privacy policy