CSS erzwingt Bildgrößenänderung und behält Seitenverhältnis bei

Question

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

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

Wie Sie sehen können, height y width sind bereits festgelegt. Ich habe eine CSS-Regel für Bilder hinzugefügt:

img {
  max-width: 500px;
}

Aber für big_image.jpg erhalte ich width=500 y height=600 . Wie kann ich Bilder so einstellen, dass ihre Größe verändert wird, ohne ihr Seitenverhältnis zu verändern?

Answer 1

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 zu groß für den angegebenen Bereich ist (im Gegensatz zu unten, es wird nicht vergrößert).

Answer 2

Hier ist eine Lösung:

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

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

Weitere Informationen über die möglichen Werte für die Option object-fit Eigenschaft und eine Kompatibilitätstabelle sind hier verfügbar: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Answer 3

Die folgenden Lösungen ermöglichen die Vergrößerung und Verkleinerung des Bildes abhängig von der Breite der übergeordneten Box.

Alle Bilder haben einen übergeordneten Container mit einer festen Breite nur zu Demonstrationszwecken . In der Produktion wird dies die Breite des übergeordneten Rahmens sein.

Best Practice (2018):

Bei dieser Lösung wird der Browser angewiesen, 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://place-hold.it/400x400">
</div>

Ausgefallenere Lösung:

Mit der raffinierteren Lösung können Sie das Bild unabhängig von seiner Größe zuschneiden und eine Hintergrundfarbe hinzufügen, um den Beschnitt auszugleichen.

.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://place-hold.it/640x220">
  </div>
</div>

Für die Zeile, in der die Auffüllung angegeben wird, müssen Sie beispielsweise das Seitenverhältnis des Bildes berechnen:

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

640/220 = 2.909
100/2.909 = 34.37%

Obere Polsterung = 34,37 %.

Answer 4

Ähnlich wie bei einigen Antworten hier, aber in meinem Fall waren die Bilder mal größer, mal kleiner.

Dieser Stil hat sich bewährt, um sicherzustellen, dass alle Bilder den gesamten verfügbaren Platz ausnutzen, das Verhältnis beibehalten und nicht abgeschnitten werden:

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

Answer 5

Die Eigenschaft background-size ist nur ie>=9, aber wenn das für Sie in Ordnung ist, können Sie ein div mit background-image und setzen 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 was auch immer Sie wollen, und nicht nur wird das Bild sein Seitenverhältnis behalten es wird auch sowohl vertikal als auch horizontal innerhalb der div zentriert werden. Vergessen Sie nur nicht, die Größen in der CSS einzustellen, da divs nicht das Attribut width/height am Tag selbst haben.

Dieser Ansatz unterscheidet sich von setecs Antwort, mit dieser das Bild Bereich konstant sein wird und von Ihnen definiert (so dass leere Räume entweder horizontal oder vertikal abhängig von der div Größe und Bild Seitenverhältnis), während setecs Antwort erhalten Sie eine Box, die genau die Größe des skalierten Bildes (ohne leere Räume).

Bearbeiten: Laut der MDN-Dokumentation zur Hintergrundgröße können Sie die Eigenschaft background-size im IE8 mit einer eigenen Filterdeklaration simulieren:

Obwohl Internet Explorer 8 die Eigenschaft background-size nicht unterstützt, ist es möglich, einige seiner Funktionen mit der nicht standardmäßigen Funktion -ms-filter zu emulieren:

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