Dimensione dell'immagine CSS, come riempire, non allungare?

Ho un'immagine e voglio impostarla su una larghezza e un'altezza specifiche (in pixel)

Ma se imposto larghezza e altezza usando css ( width:150px; height:100px), l'immagine verrà allungata e potrebbe essere brutta.

Come riempire le immagini con una dimensione specifica usando CSS e non allungarle ?

Esempio di riempimento e stiramento dell'immagine:

Immagine originale:

Immagine allungata:

Immagine riempita:

Si noti che nell'esempio di immagine riempita sopra: innanzitutto, l'immagine viene ridimensionata a 150x255 (proporzioni mantenute), quindi viene ritagliata a 150x100.

Se si desidera utilizzare l'immagine come sfondo CSS, esiste una soluzione elegante. Basta usare covero containnella background-sizeproprietà CSS3.

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

Mentre coverti darà un'immagine ingrandita, containti darà un'immagine ridotta. Entrambi manterranno le proporzioni dei pixel.

http://jsfiddle.net/uTHqs/ (usando la copertina)

http://jsfiddle.net/HZ2FT/ (usando contenere)

Questo approccio ha il vantaggio di essere amichevole con i display Retina secondo la guida rapida di Thomas Fuchs.

Vale la pena ricordare che il supporto del browser per entrambi gli attributi esclude IE6-8.

È possibile utilizzare la proprietà CSS 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" />

Vedi esempio qui

C'è un polyfill per IE: https://github.com/anselmh/object-fit

Miglioramento della risposta sopra di @afonsoduarte ( NON quella accettata) .
nel caso in cui si stia utilizzando bootstrap

1. Fornire width:100%lo stile.
   Ciò è utile se si utilizza bootstrap e si desidera che l'immagine si estenda per tutta la larghezza disponibile.
   

2. La specifica della heightproprietà è facoltativa, è possibile rimuoverla / conservarla in base alle proprie esigenze

   .cover {
      object-fit: cover;
      width: 100%;
      /*height: 300px;  optional, you can remove it, but in my case it was good */
   }

3. A proposito, NON è NECESSARIO fornire gli attributi heighte sull'elemento perché saranno sovrascritti dallo stile. quindi basta scrivere qualcosa del genere.widthimage
   

   <img class="cover" src="url to img ..."  />

L'unico vero modo è avere un contenitore attorno all'immagine e usare 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%;
}

Nel CSS è una seccatura fare ciò che vuoi e centrare l'immagine, c'è una soluzione rapida in jquery come:

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/

Soluzione CSS senza JS e senza immagine di sfondo:

Metodo 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/

Metodo 2 "trasforma" (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/

Il metodo 2 può essere utilizzato per centrare un'immagine in un contenitore larghezza / altezza fisso. Entrambi possono traboccare - e se l'immagine è più piccola del contenitore sarà comunque centrata.

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

Metodo 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/

Metodo 4 "doppio involucro E doppia immagine" (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/

• Il metodo 1 ha un supporto leggermente migliore: devi impostare la larghezza O l'altezza dell'immagine!
• Con i prefissi il metodo 2 ha anche un supporto decente (da ie9 in su) - Il metodo 2 non ha supporto su Opera mini!
• Il metodo 3 utilizza due wrapper: può traboccare larghezza E altezza.
• Il metodo 4 utilizza una doppia immagine (una come segnaposto) che fornisce un ulteriore sovraccarico di larghezza di banda, ma un supporto ancora migliore per i browser.

I metodi 1 e 3 non sembrano funzionare con Firefox

Un'altra soluzione è quella di mettere l'immagine in un contenitore con la larghezza e l'altezza desiderate. Usando questo metodo non dovresti impostare l'immagine come immagine di sfondo di un elemento.

Quindi puoi farlo con un imgtag e basta impostare una larghezza massima e altezza massima sull'elemento.

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>

Ora, quando si modifica la dimensione del contenitore, l'immagine diventerà automaticamente più grande possibile senza andare oltre i limiti o distorcere.

Se si desidera centrare l'immagine in verticale e in orizzontale, è possibile modificare il contenitore CSS in:

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

Ecco un JS Fiddle http://jsfiddle.net/9kUYC/2/

Partendo dalla risposta di @Dominic Green usando jQuery, ecco una soluzione che dovrebbe funzionare con immagini più larghe di quanto siano alte o più alte di quanto siano larghe.

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

C'è probabilmente un modo più elegante di fare JavaScript, ma questo funziona.

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();

• Non utilizzando lo sfondo CSS
• Solo 1 div per ritagliarlo
• Ridimensionato alla larghezza minima rispetto a mantenere le proporzioni corrette
• Ritaglia dal centro (in verticale e in orizzontale, puoi regolarlo con la parte superiore, lef e trasformazione)

Fai attenzione se stai usando un tema o qualcosa del genere, spesso dichiareranno img max-width al 100%. Non devi farne nessuno. Provalo :)

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%);
}

Ho aiutato a costruire un plugin jQuery chiamato Fillmore , che gestisce i background-size: coverbrowser in che lo supportano e ha uno spessore per quelli che non lo fanno. Dai un'occhiata!

Penso che sia abbastanza tardi per questa risposta. Spero comunque che questo possa aiutare qualcuno in futuro. Ho affrontato il problema posizionando le carte in angolare. Ci sono carte visualizzate per una serie di eventi. Se la larghezza dell'immagine dell'evento è grande per la carta, l'immagine dovrebbe essere mostrata ritagliando da due lati e un'altezza del 100%. Se l'altezza dell'immagine è lunga, la parte inferiore delle immagini viene ritagliata e la larghezza è del 100%. Ecco la mia pura soluzione CSS per questo:

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

Prova qualcosa del genere: http://jsfiddle.net/D7E3E/4/

Utilizzo di un contenitore con overflow: nascosto

EDIT: @Dominic Green mi ha battuto.

Questo riempirà le immagini di una dimensione specifica, senza allungarle o senza ritagliarle

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

Per adattare l'immagine a schermo intero prova questo:

ripetizione sfondo: tondo;

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

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