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

577

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.

Moonvader
quelle

Antworten:

774

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).

setec
quelle
11
Gibt es eine Version davon, die Bilder vergrößert, damit sie auch in ihren Container passen? Ich habe versucht, die maximale Breite / maximale Höhe als Zahlen mit der Breite / Höhe als automatisch, aber wie oben angegeben, wird das Bild nicht vergrößert. Ich habe auch versucht, min-width / min-height zu verwenden. Ich kann die Kombination einfach nicht richtig machen. Ich möchte einfach, dass das Bild, das ich in diesen Container legen muss, in der maximal möglichen Größe angezeigt wird, ohne das Seitenverhältnis zu ändern, unabhängig davon, ob das Bild verkleinert oder vergrößert wird, um dies zu erreichen.
Dee2000
7
Scheint, dass Anzeige: Block nicht mehr benötigt wird.
Actimel
3
Beachten Sie, dass es sich bei der Frage um eine Frage handelte <img>, die selbst eine Breite und Höhe enthält. Ich denke, dies bedeutet, dass Sie die !importantInformationen zur Breite / Höhe des Tags verwenden müssen.
Alexis Wilke
18
@ AlexisWilke CSS-Regeln überschreiben HTML-Attribute. !importantwird nicht gebraucht.
Jargs
5
Verwenden Sie es auf Chrome, funktioniert nicht für mich, auch mit! Wichtig
Ray
266

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.

Théo T. Carranza
quelle
44
object-fitist fantastisch, toller Tipp! Es gibt einige feine Polyfill-Bibliotheken, wenn sich jemand über die IE-Kompatibilität wundert.
leise
7
Schön, denken Sie daran , dies nicht funktioniert für IE obwohl
guival
1
Nicht funktionsfähig auf SAMSUNG Signage Display-Webanwendungen.
Mär
3
Beste verfügbare Lösung
Cynthia Sanchez
10
Sie können auch object-fit: containeine Breite oder Höhe verwenden und angeben!
Broper
236

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%.

Aternus
quelle
1
Es funktioniert, sollte aber bei den meisten Anwendungen eine maximale Breite von 100% anstelle der Breite haben.
Dudeist
Ich denke nicht, dass !importanthier gebraucht wird.
Flimm
1
Mit dem übergeordneten Element auf 100px eingestellt. Wie wird dies reaktionsschnell funktionieren?
Remi
@ Remi das ist zu Demonstrationszwecken. Ich habe oben in der Antwort eine Klarstellung hinzugefügt.
Aternus
@Flimm wurde früher für Kompatibilitätsprobleme verwendet, 2016 wird dies nicht mehr benötigt.
Aternus
64

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')";
Hoffmann
quelle
2
Endlich eine reine CSS-Lösung, um ein Bild zu maximieren und gleichzeitig das Seitenverhältnis beizubehalten. Vielen Dank. Zum Glück ist IE vor 9 zunehmend unwichtig.
Menschheit und
2
Tolle Lösung, danke! Beachten Sie auch, dass Sie "enthalten" durch "Abdeckung" ersetzen können, wenn Sie das Div vollständig ausfüllen und zusätzliche Pixel zuschneiden möchten, die nicht zum Verhältnis passen
mbritto
Dies sollte die richtige Antwort sein. Ich liebe diese Lösung. Es behält Ihre Proportionen und ist leicht zu verstehen.
Skolind
1
Während dies programmgesteuert eine korrekte Antwort ist, haben Sie, wenn ein Bild auf diese Weise "wichtig" ist, keine img-Attribute, sodass Sie SEO töten.
fat_mike
Großartig! Es war die einzige dieser Lösungen, die sowohl für Hoch- als auch für Querformatbilder sowie für Hoch- und Querformatcontainer des Bildes (z. B. je nach Fenstergröße unterschiedlich) in allen 4 Kombinationen und zusätzlich auch in IE11 funktionierte, was recht zu sein schien eine Voraussetzung. Vielen Dank!
cupiqi09
53

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;
}
Moisés
quelle
object-fitfunktioniert bei mir funktioniert es in allen browser?
Murtuza Zabuawala
Befindet sich .imgeine Klasse auf dem übergeordneten oder dem Bild? Könnten Sie eine jsfiddle mit Beispiel für Hoch- und Querformat machen?
Entwurf durch Adrian
19

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;"/>
el Dude
quelle
Ich kann es nicht mit allen Bildern machen - es gibt viele Bilder, die bereits in vielen HTML-Dateien platziert sind
Moonvader
2
OK. versuche img {max-width: 500px; Höhe: Auto; maximale Höhe: 600px;}
el Dude
1
Nützliche Informationen wie dieser Kommentar sollten Ihrem Beitrag hinzugefügt werden. Auf diese Weise können wir sofort sehen, was Sie sich ausgedacht haben.
Bram Vanroy
2
Der Nachteil des Weglassens des heightAttributs im imgTag besteht darin, dass der Browser vor dem Herunterladen des Bildes nicht berechnen kann, wie viel Speicherplatz das Bild beansprucht. Dies verlangsamt das Rendern der Seite und kann zu mehr "Springen" führen.
Flimm
11

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;
}
Mark Bax
quelle
2
Dies ist die gleiche Antwort wie die Antwort von setec , außer dass 100%anstelle eines bestimmten Pixelwerts verwendet wird.
Flimm
5
display: block;ist unnötig.
Flimm
Das ist perfekt und funktioniert mit Bildern jeder Größe und Proportionen
Le Droid
8

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 .

Marat Tanalin
quelle
Vielen Dank, dass es in modernen Versionen von IE, Opera, FF und Chrome funktioniert. Ich brauche etwas Zeit, um es mit anderen Browsern zu testen.
Moonvader
7
Nicht !importantin CSS verwenden. Es ist ein Hack, der irgendwann zurückkommt, um dich zu verfolgen.
Automatico
1
Sie brauchen !importanthier nicht einmal .
Flimm
8

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.

Thomas Carlton
quelle
5

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;
}
Aleksandar Toplek
quelle
5

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.

Remi
quelle
Ich mag das, da es mit Kreisen funktioniert border-radius. Aber leider beschneidet es das Bild und macht es nicht so gut, einen Rand für das Bild in der Div zu erstellen, soweit ich es versucht habe.
Jake
4

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

aislamfaisal
quelle
4

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

Choco Li
quelle
Dies funktioniert nicht, wenn "Höhe und Breite bereits angegeben" sind, wie in der ursprünglichen Frage erwähnt. Es gibt Zeiten, in denen Sie Breite und Höhe erzwingen und das Bild dann entsprechend dem Seitenverhältnis vergrößern / verkleinern möchten.
Entwurf durch Adrian
3

Sie können dies verwenden:

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

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
Chun Yang
quelle
Dadurch wird das div auf 100% der Breite des übergeordneten Elements gedehnt, das Seitenverhältnis des Bildes wird jedoch nicht beibehalten.
David Ball
Hast Du es versucht? Ich habe es funktioniert jsfiddle.net/zuysj22w . Können Sie Ihren Fall zeigen? @ DavidBall
Chun Yang
Dies ist eine ähnliche Lösung wie Hoffmanns Antwort .
Flimm
2

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;
}
nickt
quelle
1

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.

Yselection Rajeev Shukla
quelle
Obwohl der Fragenbeitrag es nicht darlegte, implizierte OP meiner Meinung nach stark, dass er / sie nach einer Nur-CSS-Lösung suchte.
Flimm
0

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

Flimm
quelle
0

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;
      }
    }
Paul Bormans
quelle
0

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.

John
quelle
-1

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;
}
Du weißt
quelle
1
Könnten Sie bitte kurz erklären, warum diese Lösung hilft? (Nur ein Satz ist genug.)
Aenadon
Einfach, weil das Bild das Seitenverhältnis beibehält, während die maximale Breite und Höhe verhindern, dass es größer wird als der Container
Uknow