Beibehaltung Seitenverhältnis mit min/max Höhe/Breite?

Habe ich eine Galerie auf meiner Website, wo Nutzer können Bilder hochladen.

Möchte ich die Bilder sitzen in einem div, behält seine Höhe, die Bilder sollten nicht größer als 500 Pixel in der Höhe. Die Breite sollte automatisch erfolgen, um das Seitenverhältnis beizubehalten.

HTML:

<div id="gallery">
    <img src="uploads/my-dynamic-img.jpg">
</div>

Habe ich versucht, dieses CSS:

#gallery{
    height: 500px;

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

Den oben funktioniert gut, die Galerie ist immer 500 Pixel hohen und Bilder, die nie mehr als 500 Pixel in der Höhe. Ich Laufe in Probleme, wenn auch mit kleineren Bildern, wenn ein Nutzer hochlädt, ein kleines Bild, ich möchte es 'geblasen', bis zu einem minimum von 200px. Ich weiß, dies kann erreicht werden durch Einstellung einer min-height auf das Bild, das problem mit diesem ist, wenn das Bild weniger als 200 Pixel in der Höhe aber sagen, 2000px Breite, das Bild wird dann gesprengt, um 200px in der Höhe, dann aber das Seitenverhältnis ist geschraubt, da das Bild breiter als die Bilder übergeordneten div.

Wie kann ich eine min-height, aber Sie behalten das Seitenverhältnis?

Das ist nicht der CSS-syntax -- sind Sie mit einer Sprache wie SASS oder Stylus oder ist das nur ein Fehler?
Es SASS-syntax.
Das erste, was mir in den Sinn kommt, ist die Verwendung Hintergrundbilder mit background-size: enthalten, aber das würde nicht funktionieren, wenn Sie brauchen, um zu bedecken, <= IE8.
wenn Sie haben die Kontrolle über die html-Ausgabe, verwenden Sie die server-Seite der Verarbeitung, um zu bestimmen, das Seitenverhältnis, dann fügen Sie eine "große" oder "große" Klasse und mit Ihrem styling getrennt. Wenn Sie don ' T haben die Kontrolle über html, über javascript verwenden, um das gleiche zu tun, und wieder, Stil Sie separat.

InformationsquelleAutor panthro | 2014-11-23

  1. 25

    Die Immobilie, die Sie suchen, ist object-fit. Dies ist eine Opera-Innovationen, können Sie mehr darüber Lesen Sie in Ihrer 2011 dev-Artikel auf Objekt-fit (ja, es ist schon so lang). Vor ein paar Jahren, wäre ich nicht in der Lage gewesen, um es dir empfehlen, aber caniuse zeigt, dass alle anderen starten, um aufzuholen:

    • Opera 10.6-12.1 (-o - Präfix)
    • Chrome 31+
    • Opera 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 zwingen wird, das image zu pflegen, dessen Seitenverhältnis, egal was.

    Alternativ möchten Sie vielleicht, um diese stattdessen zu verwenden:

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

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

    Wie von Microsoft Kante, diese immer noch nicht umgesetzt worden ist. Allerdings, Sie feststellen, dass es unter Berücksichtigung von Edge. https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/
    Ein problem mit dieser sullotion ist, dass es nur die Kräfte, das eigentliche Bild und nicht die img-Tags enthalten, Proportionen, also, wenn Sie zum Beispiel einen Rahmen auf das Bild-tag, es wird nicht halten Sie die Proportionen: jsfiddle.net/pwxca5af
    Danke! Es funktioniert perfekt, wenn Sie wollen, definieren Orte waren wird ein Bild sein, aber Sie haben immer noch nicht laden Sie es noch nicht, weil der Netzwerk-Verzögerung. Ich bin die Kombination mit lazy load auf einem großen raster von 4x20 Bild-Elemente.
    es scheint, dass heute, Kante, Objekt-fit implementiert. Es funktioniert!

    InformationsquelleAutor cimmanon

  2. 3

    Ist der einzige Weg, ich weiß, der möglicherweise zu bewerkstelligen ist, indem entweder die width oder height zu auto.

    #gallery{
    height: 500px;

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

    InformationsquelleAutor EternalHour

  3. 1

    Ich habe Sinn, etwas ähnliches zu tun, eigentlich. Hier ist etwas in jQuery wenn Sie in.

    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

    InformationsquelleAutor Dustin

Schreibe einen Kommentar