it-swarm.com.de

CSS Bildgröße ändern und Seitenverhältnis beibehalten

Ich arbeite mit Bildern und habe ein Problem mit den Seitenverhältnissen festgestellt.

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

Wie Sie sehen, sind height und width bereits angegeben. Ich habe die CSS-Regel für Bilder hinzugefügt:

img {
  max-width:500px;
}

Aber für big_image.jpg erhalte ich width=500 und height=600. Wie kann ich festlegen, dass Bilder in der Größe angepasst werden, ohne das Seitenverhältnis zu verändern?.

479
moonvader
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 einen bestimmten Bereich zu groß ist (als Nachteil wird das Bild nicht vergrößert).

671
setec

Die folgenden Lösungen ermöglichen das Vergrößern und Verkleinern des Bilds, abhängig von der Breite des übergeordneten Felds.

Alle Bilder haben einen übergeordneten Container mit einer festen Breite nur zu Demonstrationszwecken . In der Produktion entspricht dies der 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>

Anspruchsvollere 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 den Zeilenabstand 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%

Die obere Polsterung beträgt also 34,37%.

207
Aternus

Ich habe mit diesem Problem ziemlich hart 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 Eigenschaft Objektanpassung übernimmt das Zuschneiden für Sie.

Prost.

186

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

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

Jetzt können Sie Ihre div-Größe einfach auf das gewünschte Format einstellen und das Bild behält nicht nur sein Seitenverhältnis bei, sondern wird auch vertikal und horizontal innerhalb des div zentriert. Vergessen Sie jedoch nicht, die Größe für das CSS festzulegen, da divs das width/height-Attribut nicht für das Tag selbst haben.

Dieser Ansatz unterscheidet sich von der Antwort von setecs. Mit dieser Option wird der Bildbereich konstant und von Ihnen definiert (je nach Div-Größe und Bildseitenverhältnis lassen Sie entweder horizontale oder vertikale Leerstellen frei), während Sie mit setecs answer eine Box erhalten, die genau der entspricht Größe des skalierten Bildes (ohne Leerzeichen).

Bearbeiten: Gemäß der MDN-Hintergrundgrößendokumentation können Sie die Hintergrundgrößeneigenschaft in IE8 mithilfe einer proprietären Filterdeklaration simulieren:

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

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

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

Dieser Stil hat wie ein Zauber gewirkt, 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;
}
33
Moisés

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 Einstellung vornehmen, wird die Größe geändert, aber das Seitenverhältnis beibehalten.

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

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

Fügen Sie dies einfach zu 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;
}
10
Mark Bax

Es gibt keine Standardmethode, um das Seitenverhältnis für Bilder beizubehalten, bei denen width, height und max-width zusammen angegeben sind.

Daher müssen wir entweder width und height angeben, um Seitensprünge beim Laden von Bildern zu vermeiden, oder max-width verwenden und keine Abmessungen für Bilder angeben.

Die Angabe von width (ohne height) ist normalerweise nicht sinnvoll. Sie können jedoch versuchen, das HTML-Attribut height zu überschreiben, indem Sie eine Regel wie IMG {height: auto; } in Ihr Stylesheet einfügen.

Siehe auch den zugehörigen Firefox Bug 392261 .

8
Marat Tanalin

Um ein ansprechendes Bild beizubehalten, während das Bild dennoch ein bestimmtes Seitenverhältnis aufweist, 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 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.

5
Remi

Setzen Sie die CSS-Klasse Ihres Bildcontainertags 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;
}
5

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

Hier ist die Antwort, wenn Sie ein Bild mit festem Prozentsatz der Breite , aber nicht festem Pixel der Breite .

Und dies ist nützlich, 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: absolute, um das Bild in den Füllbereich einzufügen.
  3. Verwenden Sie max-height and max-width, um sicherzustellen, dass das Bild nicht über dem übergeordneten Element liegt.
  4. verwenden Sie display:block and margin: auto, um das Bild zu zentrieren.

Ich habe auch die meisten Tricks in der Geige kommentiert.


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

einfaches CSS mit Hintergrund http://jsfiddle.net/4660s79h/2/

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

das Konzept zur Verwendung der absoluten Position ist von hier http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

5
Choco Li

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">
4
aislamfaisal

Sie können dies verwenden:

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

Sie können ein Div wie folgt erstellen:

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

Und benutze 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
2
Chun Yang

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

Die Lösung von setec ist gut für "Shrink to Fit" im Auto-Modus. Um jedoch optimal zu ERWEITERN, um in den "Auto" -Modus zu passen, müssen Sie das empfangene Bild zuerst in eine temporäre ID einfügen 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 der Originalgröße und nicht in der erweiterten Version speichern, um Ihre größere Anzeigebox 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. Es behält das Seitenverhältnis bei und fügt @ grau-dunkle Balken oben/unten oder links/schreiben für die kürzeste Abmessung ein. 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;
      }
    }
0
Paul Bormans

Vollbild-Präsentation:

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.

0
John
img {
  max-width: 80px; /* Also works with percentage value like 100% */
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

<p>Let's say the author of the HTML deliberately wants
  the height to be half the value of the width,
  this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">
0
Flimm