it-swarm.com.de

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

Ich habe ein Bild und möchte es auf eine bestimmte Breite und Höhe (in Pixel) einstellen

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

Wie Füllen Bilder auf eine bestimmte Größe mit CSS, und nicht dehnen es?

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

Original Bild:

Original

Gestrecktes Bild:

Stretched

Gefülltes Bild:

Filled

Bitte beachten Sie, dass im obigen Beispiel "Gefülltes Bild" die Größe des Bildes zunächst auf 150 x 255 (beibehaltenes Seitenverhältnis) und dann auf beschnitten geändert wird. bis 150x100.

363
Mahdi Ghiasi

Wenn Sie das Bild als CSS-Hintergrund verwenden möchten, gibt es eine elegante Lösung. Verwenden Sie einfach cover oder contain in der CSS3-Eigenschaft background-size.

<div class="container"></div>​

.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%;
}​

Während cover ein vergrößertes Bild liefert, liefert contain ein verkleinertes Bild. Bei beiden wird das Pixel-Seitenverhältnis beibehalten.

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

http://jsfiddle.net/HZ2FT/ (using contain)

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

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

352
depa

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

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

Siehe Beispiel hier

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

473
afonsoduarte

Der einzige echte Weg ist, einen Container um Ihr Bild zu haben und overflow:hidden zu verwenden:

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 mühsam, in CSS zu tun, was Sie wollen, und das Bild zu zentrieren. In jquery gibt es eine schnelle Lösung, wie zum Beispiel:

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/

55
Dominic Green

Verbesserung bei der am meisten erhobenen Antwort auf diese Frage (NICHT die akzeptierte).
falls Sie Bootstrap
verwenden

Es gibt drei Unterschiede:

  1. Bereitstellen von width:100% für den Stil.
    Dies ist hilfreich, wenn Sie Bootstrap verwenden und das Bild die gesamte verfügbare Breite strecken möchten.

  2. Die Angabe der Eigenschaft height ist optional. Sie können sie nach Bedarf entfernen/beibehalten

    .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 height und width für das Element image NICHT angegeben werden, da sie vom Stil überschrieben werden.
    Es reicht also, so etwas zu schreiben.

    <img class="cover" src="url to img ..."  />
    
51
Hakan Fıstık

CSS-Lösung ohne JS und ohne Hintergrundbild:

Methode 1 "margin auto" (IE8 + - NOT 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 "transformieren" (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 + - NOT 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 hat eine etwas bessere Unterstützung - Sie müssen die Breite OR der Bildhöhe einstellen!
  • Mit den Präfixen hat Methode 2 auch eine 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), wodurch zusätzlicher Bandbreitenaufwand entsteht, die Crossbrowser-Unterstützung jedoch noch verbessert wird.

Methode 1 und 3 scheinen mit Firefox nicht zu funktionieren

26
J.T. Houtenbos

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 img -Tag 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 zentrieren vertikal und horizontal möchten, können Sie das Container-CSS folgendermaßen ändern:

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

Hier ist ein JS Fiddle http://jsfiddle.net/9kUYC/2/

9
earl3s

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 verwenden, 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();
5
ramdog

Ich habe geholfen, ein jQuery-Plugin mit dem Namen Fillmore zu erstellen, das den background-size: cover in Browsern verarbeitet, die dies unterstützen, und ein Shim für diejenigen, die dies nicht tun. Probieren Sie es aus!

4
Aidan Feldman

Dadurch werden Bilder auf eine bestimmte 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;
}
3
Manoj Selvin

Ich denke, es ist ziemlich spät für diese Antwort. Ich hoffe auf jeden Fall, dass dies in Zukunft jemandem hilft. Ich hatte das Problem, die Karten im Winkel 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 Beschneiden von zwei Seiten und einer Höhe von 100% angezeigt werden. Wenn die Bildhöhe lang ist, wird der untere Teil der Bilder beschnitten und die Breite beträgt 100%. Hier ist meine reine CSS-Lösung dafür:

enter image description here

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;
}
3

Versuchen Sie etwas wie dieses: http://jsfiddle.net/D7E3E/4/

Behälter mit Überlauf verwenden: versteckt

EDIT: @ Dominic Green hat mich geschlagen.

3
woutr_be
  • Ohne CSS-Hintergrund
  • Nur 1 Div, um es zu schneiden
  • Auf minimale Breite verkleinert, um das korrekte Seitenverhältnis beizubehalten
  • Beschneiden von der Mitte (vertikal und horizontal, Sie können dies mit der oberen, linken und rechten Seite anpassen)

Seien Sie vorsichtig, wenn Sie ein Thema oder etwas anderes verwenden. Oft wird img max-width bei 100% angegeben. Du musst keine machen. Probieren Sie 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%);
}
1
dmegatool