Ich arbeite mit Bildern und bin auf ein Problem mit Seitenverhältnissen gestoßen.

<img src="big_image.jpg" width="900" height="600" alt="" />

Wie Sie sehen können heightund widthbereits angegeben sind. Ich habe die CSS-Regel für Bilder hinzugefügt:

img {
  max-width:500px;
}

Aber dafür big_image.jpgerhalte ich width=500und height=600. Wie ich Bilder so einstellen kann, dass sie in der Größe angepasst werden, während ihre Seitenverhältnisse beibehalten werden.

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Dadurch wird das Bild verkleinert, wenn es für den angegebenen Bereich zu groß ist (als Nachteil wird das Bild nicht vergrößert).

Ich habe ziemlich hart mit diesem Problem gekämpft und bin schließlich zu dieser einfachen Lösung gekommen:

object-fit: cover;
width: 100%;
height: 250px;

Sie können die Breite und Höhe an Ihre Bedürfnisse anpassen, und die Objektanpassungseigenschaft übernimmt das Zuschneiden für Sie.

Prost.

Mit den folgenden Lösungen können Sie das Bild abhängig von der Breite des übergeordneten Felds vergrößern und verkleinern .

Alle Bilder haben einen übergeordneten Container mit einer festen Breite, der nur zu Demonstrationszwecken dient . In der Produktion ist dies die Breite der übergeordneten Box.

Best Practice (2018):

Diese Lösung weist den Browser an, das Bild mit der maximal verfügbaren Breite zu rendern und die Höhe als Prozentsatz dieser Breite anzupassen.

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

Ausgefallenere Lösung:

Mit der schickeren Lösung können Sie das Bild unabhängig von seiner Größe zuschneiden und eine Hintergrundfarbe hinzufügen, um das Zuschneiden zu kompensieren.

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

Für die linienspezifizierende Auffüllung müssen Sie das Seitenverhältnis des Bildes berechnen, zum Beispiel:

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

Top Padding = 34,37%.

Die Eigenschaft für die Hintergrundgröße ist nur> = 9, aber wenn das für Sie in Ordnung ist, können Sie ein div mit verwenden background-imageund Folgendes festlegen background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Jetzt können Sie einfach Ihre Div-Größe auf das einstellen, was Sie möchten, und das Bild behält nicht nur sein Seitenverhältnis bei, sondern wird auch vertikal und horizontal innerhalb des Div zentralisiert. Vergessen Sie nur nicht, die Größen auf dem CSS festzulegen, da divs nicht das Attribut width / height für das Tag selbst haben.

Dieser Ansatz unterscheidet sich von der Antwort von setecs. Wenn Sie dies verwenden, wird der Bildbereich von Ihnen konstant und definiert (wobei je nach Div-Größe und Bildseitenverhältnis leere Räume entweder horizontal oder vertikal verbleiben), während bei der Antwort von setecs eine Box angezeigt wird, die genau der entspricht Größe des skalierten Bildes (ohne Leerzeichen).

Bearbeiten: Gemäß der MDN-Dokumentation zur Hintergrundgröße können Sie die Eigenschaft zur Hintergrundgröße in IE8 mithilfe einer proprietären Filterdeklaration simulieren:

Obwohl Internet Explorer 8 die Eigenschaft "Hintergrundgröße" nicht unterstützt, ist es möglich, einige seiner Funktionen mithilfe der nicht standardmäßigen -ms-Filterfunktion zu emulieren:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

Sehr ähnlich zu einigen Antworten hier, aber in meinem Fall hatte ich Bilder, die manchmal größer, manchmal größer waren.

Dieser Stil wirkte wie ein Zauber, um sicherzustellen, dass alle Bilder den gesamten verfügbaren Platz nutzen, das Verhältnis beibehalten und keine Schnitte:

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

Entfernen Sie die Eigenschaft "height".

<img src="big_image.jpg" width="900" alt=""/>

Indem Sie beide angeben, ändern Sie das Seitenverhältnis des Bildes. Wenn Sie nur eine festlegen, wird die Größe geändert, das Seitenverhältnis bleibt jedoch erhalten.

Optional, um Übergrößen einzuschränken:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Fügen Sie dies einfach Ihrem CSS hinzu. Es wird automatisch verkleinert und erweitert, wobei das ursprüngliche Verhältnis beibehalten wird.

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

Es gibt keine Standardmethode Seitenverhältnis für Bilder mit zu erhalten width, heightund max-widthspezifizierte zusammen.

Daher sind wir gezwungen, beim Laden von Bildern entweder Seitensprünge anzugeben widthund heightzu verhindern oder max-widthDimensionen für Bilder zu verwenden und nicht anzugeben.

Nur width(ohne height) anzugeben ist normalerweise nicht sehr sinnvoll, aber Sie können versuchen, das heightHTML-Attribut zu überschreiben, indem Sie eine Regel wie IMG {height: auto; }in Ihr Stylesheet einfügen.

Siehe auch den zugehörigen Firefox- Fehler 392261 .

Hier ist eine Lösung:

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

Dadurch wird sichergestellt, dass das Bild immer das gesamte übergeordnete Element abdeckt (verkleinert und vergrößert) und das gleiche Seitenverhältnis beibehält.

Setzen Sie die CSS-Klasse Ihres Bildcontainer-Tags auf image-class:

<div class="image-full"></div>

und fügen Sie dies Ihrem CSS-Stylesheet hinzu.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

Um ein ansprechendes Bild beizubehalten und gleichzeitig das Bild auf ein bestimmtes Seitenverhältnis zu bringen, können Sie Folgendes tun:

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

Und SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

Dies kann verwendet werden, um ein bestimmtes Seitenverhältnis zu erzwingen, unabhängig von der Größe des Bildes, das die Autoren hochladen.

Vielen Dank an @Kseso unter http://codepen.io/Kseso/pen/bfdhg . Überprüfen Sie diese URL auf weitere Verhältnisse und ein funktionierendes Beispiel.

Um ein Bild zu erzwingen, das in eine exakte Größe passt, müssen Sie nicht zu viele Codes schreiben. Es ist so einfach

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

https://jsfiddle.net/sot2qgj6/3/

Hier ist die Antwort, wenn Sie ein Bild mit einem festen Prozentsatz der Breite , aber nicht mit einem festen Pixel der Breite einfügen möchten .

Dies ist hilfreich, wenn Sie mit unterschiedlichen Bildschirmgrößen arbeiten .

Die Tricks sind

1. Verwenden Sie padding-top, um die Höhe von der Breite einzustellen.
2. Verwenden Sie position: absolutediese Option , um das Bild in den Auffüllbereich einzufügen.
3. Verwenden Sie max-height and max-widthdiese Option , um sicherzustellen, dass das Bild nicht über dem übergeordneten Element angezeigt wird.
4. Verwenden Sie, display:block and margin: autoum das Bild zu zentrieren.

Ich habe auch die meisten Tricks in der Geige kommentiert.

Ich finde auch einige andere Wege, um dies zu erreichen. Es wird kein echtes Bild in HTML geben, daher stelle ich die Top-Antwort persönlich vor, wenn ich ein "img" -Element in HTML benötige.

einfaches CSS unter Verwendung des Hintergrunds http://jsfiddle.net/4660s79h/2/

Hintergrundbild mit Wort oben http://jsfiddle.net/4660s79h/1/

Das Konzept zur Verwendung von Position Absolue ist von hier http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Sie können dies verwenden:

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Sie können ein div wie folgt erstellen:

<div class="image" style="background-image:url('/to/your/image')"></div>

Und verwenden Sie dieses CSS, um es zu stylen:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

Ich würde für einen reaktionsschnellen Ansatz vorschlagen, dass die besten Vorgehensweisen darin bestehen, die Viewport-Einheiten und die Min / Max-Attribute wie folgt zu verwenden:

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

Dadurch wird das Bild verkleinert, wenn es für den angegebenen Bereich zu groß ist (als Nachteil wird das Bild nicht vergrößert).

Die Lösung von setec ist in Ordnung für "Shrink to Fit" im Auto-Modus. Um sich jedoch optimal zu erweitern, um in den 'Auto'-Modus zu passen, müssen Sie zuerst das empfangene Bild in eine temporäre ID versetzen. Überprüfen Sie, ob es in Höhe oder Breite erweitert werden kann (abhängig von seinem Seitenverhältnis v / s des Seitenverhältnisses von Ihr Anzeigeblock),

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

Dieser Ansatz ist nützlich, wenn empfangene Bilder kleiner als das Anzeigefeld sind. Sie müssen sie auf Ihrem Server in Original Small Size anstatt in ihrer erweiterten Version speichern, um Ihre Big Display Display Box zu füllen und Größe und Bandbreite zu sparen.

Wie wäre es mit einem Pseudoelement für die vertikale Ausrichtung? Dieser weniger Code ist für ein Karussell, aber ich denke, er funktioniert auf jedem Container mit fester Größe. Das Seitenverhältnis wird beibehalten und @ grau-dunkle Balken oben / unten oder links / schreiben für die kürzeste Dimension eingefügt. In der Zwischenzeit wird das Bild horizontal durch die Textausrichtung und vertikal durch das Pseudoelement zentriert.

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

Vollbilddarstellung:

img[data-attribute] {height: 100vh;}

Beachten Sie, dass sich das Bild im Verhältnis zum Unterschied natürlich verschlechtert, wenn die Höhe des Ansichtsfensters größer als das Bild ist.

Ich denke schließlich, dass dies die beste Lösung ist, einfach und unkompliziert :

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}