CSS Bildgröße, wie füllen, nicht dehnen?

415

Ich habe ein Bild und möchte eine bestimmte Breite und Höhe (in Pixel) festlegen.

Wenn ich jedoch Breite und Höhe mit css ( width:150px; height:100px) einstelle, wird das Bild gestreckt und es kann hässlich sein.

Wie fülle ich Bilder mit CSS auf eine bestimmte Größe und strecke sie nicht?

Beispiel für das Füllen und Strecken von Bildern:

Original Bild:

Original

Gestrecktes Bild:

Gestreckt

Gefülltes Bild:

Gefüllt

Bitte beachten Sie, dass im gefüllten Bild Beispiel oben: Erstens, Bild 150x255 (beibehalten Seitenverhältnis) geändert wird, und dann, es abgeschnitten zu 150x100.

Mahdi Ghiasi
quelle
Versuchen Sie einfach die widthund heightsollte entsprechend anpassen
NewInTheBusiness
3
Es streckt das Bild. siehe dies: jsfiddle.net/D7E3E
Mahdi Ghiasi
Es nimmt einen Teil des Bildes nicht Größe ändern!
Ali Ben Messaoud
3
Chris Coyier's hat auch einige gute Lösungen dafür: css-tricks.com/perfect-full-page-background-image
mehrdeutige
1
SEHR WICHTIG: Dies ist eine unglaublich schlechte Praxis für SEO-Zwecke. Wenn Sie es als Hintergrundbild verwenden, funktioniert es einwandfrei. Wenn Sie jedoch möchten, dass das Bild von Google gefunden wird, wird es NICHT indiziert, wenn es nur ein Hintergrundbild ist.
Alex Banman

Antworten:

394

Wenn Sie das Bild als CSS-Hintergrund verwenden möchten, gibt es eine elegante Lösung. Verwenden Sie einfach coveroder containin der background-sizeCSS3-Eigenschaft.

.container {
  width: 150px;
  height: 100px;
  background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
<div class="container"></div>

Während coverSie ein vergrößertes Bild erhalten, erhalten containSie ein verkleinertes Bild. In beiden Fällen bleibt das Pixel-Seitenverhältnis erhalten.

http://jsfiddle.net/uTHqs/ (mit Abdeckung)

http://jsfiddle.net/HZ2FT/ (mit enthalten)

Dieser Ansatz hat den Vorteil, dass er gegenüber Retina-Displays gemäß der Kurzanleitung von Thomas Fuchs freundlich ist .

Es ist erwähnenswert, dass die Browserunterstützung für beide Attribute IE6-8 ausschließt.

Marcelo De Polli
quelle
1
Da Sie die Größe des Bilds nur im CSS ändern können, können Sie ein großes Bild verwenden und es dann mithilfe von Medienabfragen entsprechend der Pixeldichte jedes Geräts verkleinern.
Marcelo De Polli
1
Können Sie erklären, warum in diesem Fall die Hintergrundposition eher die Position der Bildmitte als die obere linke Ecke anzeigt? Ist es eine Folge der Hintergrundgröße: Abdeckung?
Matto
1
meins deckt nur den gesamten DIV ab und erweitert das Bild. Ich sehe kein Kurvenende.
SearchForKnowledge
3
Wofür ist background-repeat: no-repeat;? Wenn das Bild den Container bedeckt, wiederholt es sich ohnehin nicht.
lurkit
3
'Hintergrundposition' könnte auch auf 'Mitte Mitte' gesetzt werden. zB: .container {... Hintergrundposition: Mitte Mitte; }
Leo Ribeiro
556

Sie können die CSS-Eigenschaft verwenden object-fit.

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}
<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

Siehe Beispiel hier

Es gibt eine Polyfüllung für IE: https://github.com/anselmh/object-fit

afonsoduarte
quelle
11
Interessant zu sehen, dass dies auch mit imgTags möglich ist (nicht nur background-imagedie in der obigen Antwort beschriebene Methode). Vielen Dank :)
Mahdi Ghiasi
44
Wenn Sie dies als Option in Betracht ziehen, denken Sie daran, dass object-fit dies in sehr vielen Browsern nicht unterstützt wird .
Joshreesjones
2
Leider background-sizeist in meinen Projekten selten eine praktikable Lösung. Es ist weniger wahrscheinlich, dass Sie einen SEO-Vorteil erhalten, und Sie können kein ALT-Tag, keine Beschriftung usw. zum Bild hinzufügen, wenn Sie möglicherweise zusätzlichen Kontext für Bildschirmleser bereitstellen möchten.
Markus
3
Das ist cool, aber es gibt keine IE-Unterstützung. Keine der Polyfills funktioniert mehr.
Jake
3
Nur mit object-fit: cover;macht es. Vielen Dank
Luka
67

Verbesserung der obigen Antwort durch @afonsoduarte ( NICHT die akzeptierte) .
falls Sie Bootstrap verwenden


Es gibt drei Unterschiede:

  1. Bereitstellung width:100%für den Stil.
    Dies ist hilfreich, wenn Sie Bootstrap verwenden und möchten, dass das Image die gesamte verfügbare Breite ausdehnt.

  2. Die Angabe der heightEigenschaft ist optional. Sie können sie nach Bedarf entfernen / behalten

    .cover {
       object-fit: cover;
       width: 100%;
       /*height: 300px;  optional, you can remove it, but in my case it was good */
    }
  3. Übrigens müssen die Attribute heightund widthfür das imageElement NICHT angegeben werden, da sie vom Stil überschrieben werden.
    es reicht also aus, so etwas zu schreiben.

    <img class="cover" src="url to img ..."  />
Hakan Fıstık
quelle
1
Genau das, wonach ich gesucht habe.
Francis Lanthier
1
Du brauchst einen Kuss!
Qin Wang
Objektanpassung funktioniert nicht mit IE?
bgcode
1
Es ist 2020, ich denke, es ist ein guter Zeitpunkt, IE
Hakan Fıstık
56

Der einzige wirkliche Weg besteht darin, einen Container um Ihr Bild zu haben und Folgendes zu verwenden overflow:hidden:

HTML

<div class="container"><img src="ckk.jpg" /></div>

CSS

.container {
    width: 300px;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

Es ist ein Problem in CSS, das zu tun, was Sie wollen, und das Bild zu zentrieren. In jquery gibt es eine schnelle Lösung wie:

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

http://jsfiddle.net/x86Q7/2/

Dominic Green
quelle
1
Vielen Dank. es hat funktioniert, aber es schneidet das Bild von oben ab . (siehe dies: jsfiddle.net/x86Q7 ) Gibt es keine Möglichkeit, Bilder von der Mitte aus zuzuschneiden ?
Mahdi Ghiasi
1
@ MahdiGhiasi: Ändern Sie die oberen und linken Eigenschaften in .container img css !!
Ali Ben Messaoud
Ich kann margin-topzum Beispiel ein Bild festlegen50px (siehe: jsfiddle.net/x86Q7/1 ), aber wie schneide ich es von der realen Mitte aus zu ? (Ohne jQuery?)
Mahdi Ghiasi
2
Ahh sorry habe deinen Kommentar nicht gesehen, aber ich habe die jquery nur für den Fall hinzugefügt :)
Dominic Green
1
Tolle Lösung! Für mich war die vertikale Füllung wichtiger als die horizontale, daher musste ich für die Klasse '.container img' nur "width: 100%" in "height: 100%" ändern. Vielen Dank!
Deebs
26

CSS-Lösung kein JS und kein Hintergrundbild:

Methode 1 "margin auto" (IE8 + - NICHT FF!):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  position:absolute; 
  top:0; 
  bottom:0; 
  margin: auto;
  width:100%;
}
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/

Methode 2 "Transformation" (IE9 +):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}

div img{
  position:absolute; 
  width:100%;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/1/

Methode 2 kann verwendet werden, um ein Bild in einem Container mit fester Breite / Höhe zu zentrieren. Beide können überlaufen - und wenn das Bild kleiner als der Container ist, wird es trotzdem zentriert.

http://jsfiddle.net/5xjr05dt/3/

Methode 3 "Double Wrapper" (IE8 + - NICHT FF!):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: table;
    left: 50%;
}
.inner img {
    display: block;
    border: 1px solid blue; /* just for example */
    position: relative;
    right: 50%;
    opacity: .5; /* just for example */
}
<div class="outer">
  <div class="inner">
     <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

http://jsfiddle.net/5xjr05dt/5/

Methode 4 "Double Wrapper AND Double Image" (IE8 +):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 50%;
    bottom: 0;
    display: table;
    left: 50%;
}
.inner .real_image {
    display: block;
    border: 1px solid blue; /* just for example */
    position: absolute;
    bottom: 50%;
    right: 50%;
    opacity: .5; /* just for example */
}

.inner .placeholder_image{
  opacity: 0.1; /* should be 0 */
}
<div class="outer">
  <div class="inner">
    <img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
    <img class="placeholder_image"  src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

http://jsfiddle.net/5xjr05dt/26/

  • Methode 1 bietet eine etwas bessere Unterstützung - Sie müssen die Breite ODER Höhe des Bildes einstellen!
  • Mit den Präfixen hat Methode 2 auch anständige Unterstützung (ab ie9) - Methode 2 hat keine Unterstützung für Opera mini!
  • Methode 3 verwendet zwei Wrapper - kann Breite UND Höhe überlaufen.
  • Methode 4 verwendet ein Doppelbild (eines als Platzhalter). Dies bietet zusätzlichen Bandbreitenaufwand, aber noch bessere Crossbrowser-Unterstützung.

Methode 1 und 3 scheinen mit Firefox nicht zu funktionieren

JT Houtenbos
quelle
Dies ist die einzige, die tatsächlich funktioniert (minus js Lösungen). Vielen Dank!
Jake
Es ist auf das Überlaufen von Höhe oder Breite beschränkt, aber eine interessante Lösung.
Jake
1
@Jake - Es ist möglich, Breite UND Höhe mit Methode 2 oben zu überlaufen - siehe meine aktualisierte Antwort mit der zusätzlichen Geige.
JT Houtenbos
Ja. Es ist definitiv eine gute Antwort. Ich werde noch mehr damit herumalbern. Es war etwas eigenartig für ein Bild, das breiter als größer war und reagieren musste, aber es gibt viele Anwendungen dafür.
Jake
1
@ Jake - Cool - Ich habe eine dritte Methode gefunden, um horizontal zu zentrieren. Ich habe diese Methode erweitert, um auch die vertikale Zentrierung zu unterstützen. Ich werde meinen Zusatz als 3. Methode oben veröffentlichen. Es scheint, dass es IE7 + Beweis ist (möglicherweise sogar niedriger). Hier ist die ursprüngliche Antwort: stackoverflow.com/questions/3300660/…
JT Houtenbos
10

Eine andere Lösung besteht darin, das Bild in einen Behälter mit der gewünschten Breite und Höhe zu legen. Mit dieser Methode müssten Sie das Bild nicht als Hintergrundbild eines Elements festlegen.

Dann können Sie dies mit einem imgTag tun und einfach eine maximale Breite und Höhe für das Element festlegen.

CSS:

.imgContainer {
    display: block;
    width: 150px; 
    height: 100px;
}

.imgContainer img {
    max-width: 100%;
    max-height: 100%;
}

HTML:

<div class='imgContainer'>
    <img src='imagesrc.jpg' />
</div>

Wenn Sie nun die Größe des Containers ändern, wird das Bild automatisch so groß wie möglich, ohne die Grenzen zu überschreiten oder zu verzerren.

Wenn Sie das Bild vertikal und horizontal zentrieren möchten, können Sie das Container-CSS ändern in:

.imgContainer {
    display: table-cell;
    width: 150px; 
    height: 100px;
    text-align: center;
    vertical-align: middle;
}

Hier ist eine JS-Geige http://jsfiddle.net/9kUYC/2/

Earl3s
quelle
Es ist nicht dasselbe wie Cover in CSS, wo eine der resultierenden Dimensionen immer über 100% liegt (oder im
Randfall
Nein, diese Lösung stellt sicher, dass sie niemals über 100% hinausgeht, worum es in diesem Teil der Frage ging. Sie wollten nicht, dass das Bild verzerrt wird oder über die ursprünglichen Dimensionen hinauswächst.
Earl3s
3
Die Frage war "How to Fill" mit einem Beispiel für ein gefülltes Bild, das offensichtlich beschnitten ist.
Miroshko
Aber was ist, wenn das Bild reagieren soll? Das Definieren einer bestimmten Breite und Höhe wird nicht funktionieren 😕
Ricardo Zea
2
Es war das, was ich brauchte. Vielen Dank!
Nico Rodsevich
5

Aufbauend auf der Antwort von @Dominic Green mit jQuery ist hier eine Lösung, die für Bilder funktionieren sollte, die entweder breiter als hoch oder höher als breit sind.

http://jsfiddle.net/grZLR/4/

Es gibt wahrscheinlich eine elegantere Art, JavaScript zu erstellen, aber das funktioniert.

function myTest() {
  var imgH = $("#my-img").height();
  var imgW = $("#my-img").width();
  if(imgW > imgH) {
    $(".container img").css("height", "100%");
    var conWidth = $(".container").width();
    var imgWidth = $(".container img").width();
    var gap = (imgWidth - conWidth)/2;
    $(".container img").css("margin-left", -gap);
  } else {
    $(".container img").css("width", "100%");
    var conHeight = $(".container").height();
    var imgHeight = $(".container img").height();
    var gap = (imgHeight - conHeight)/2;
    $(".container img").css("margin-top", -gap);
  }
}
myTest();
Ramdog
quelle
5
  • Kein CSS-Hintergrund
  • Nur 1 Div, um es zu schneiden
  • Auf minimale Breite angepasst, als das richtige Seitenverhältnis beizubehalten
  • Aus der Mitte zuschneiden (vertikal und horizontal können Sie dies mit oben, lef & transform anpassen)

Seien Sie vorsichtig, wenn Sie ein Thema oder etwas verwenden. Oft wird die maximale Breite img bei 100% angegeben. Du musst keine machen. Teste es aus :)

https://jsfiddle.net/o63u8sh4/

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
    <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>


div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  min-width:100%;
  min-height:100%;
  height:auto;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}
dmegatool
quelle
Dies ist die Antwort, nach der ich gesucht habe.
Marcos Buarque
Das wollte ich schon lange machen, danke;)
Boss COTIGA
4

Ich habe geholfen, ein jQuery-Plugin namens Fillmore zu erstellen , das die background-size: coverBrowser unterstützt, die es unterstützen, und ein Shim für diejenigen hat, die dies nicht tun. Schau es dir an!

Aidan Feldman
quelle
4

Ich denke, es ist ziemlich spät für diese Antwort. Ich hoffe auf jeden Fall, dass dies jemandem in Zukunft helfen wird. Ich hatte das Problem, die Karten eckig zu positionieren. Es werden Karten für eine Reihe von Ereignissen angezeigt. Wenn die Bildbreite des Ereignisses für die Karte groß ist, sollte das Bild durch Zuschneiden von zwei Seiten und einer Höhe von 100% angezeigt werden. Wenn die Bildhöhe lang ist, wird der untere Teil der Bilder zugeschnitten und die Breite beträgt 100%. Hier ist meine reine CSS-Lösung dafür:

Geben Sie hier die Bildbeschreibung ein

HTML:

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

CSS

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}
Nodirabegimxonoyim
quelle
Ich kann nicht verstehen, wie das funktioniert, aber es funktioniert. Sie müssen die Spanne absolut oben: 0; rechts: 0; unten: 0; links: 0 innerhalb des relativ positionierten übergeordneten Elements positionieren, um sie zu dimensionieren.
Mike
Vielen Dank für Ihr Feedback, lieber Mike. Ich bin froh, wenn dies hilfreich war. Soll ich die Antwort mit Ihrem Kommentar aktualisieren?
Nodirabegimxonoyim
3

Versuchen Sie so etwas: http://jsfiddle.net/D7E3E/4/

Verwenden eines Containers mit Überlauf: versteckt

EDIT: @ Dominic Green hat mich geschlagen.

woutr_be
quelle
Vielen Dank. es hat funktioniert, aber es schneidet das Bild von oben ab . (siehe dies: jsfiddle.net/x86Q7 ) Gibt es keine Möglichkeit, Bilder von der Mitte aus zuzuschneiden ?
Mahdi Ghiasi
Könnte
vorstellen kann:
Ja, um es richtig zu zentrieren, sollten Sie jQuery verwenden, was möglicherweise viel einfacher ist.
woutr_be
3

Dadurch werden Bilder bis zu einer bestimmten Größe gefüllt, ohne sie zu dehnen oder zu beschneiden

img{
    width:150px;  //your requirement size
    height:100px; //your requirement size

/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
    object-fit:scale-down;
}
Manoj Selvin
quelle
2

Versuchen Sie Folgendes, um das Bild in den Vollbildmodus zu integrieren:

Hintergrundwiederholung: rund;

suyash1798
quelle
0
<div class="container">
     <img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>

<style>
.container {
       width: 150px;
       height: 100px;
       overflow: hidden;
}
</style>
user3181614
quelle