Ukuran gambar CSS, bagaimana cara mengisi, bukan peregangan?

Saya memiliki gambar, dan saya ingin mengaturnya lebar dan tinggi tertentu (dalam piksel)

Tetapi jika saya mengatur lebar dan tinggi menggunakan css ( width:150px; height:100px), gambar akan melebar, dan itu mungkin jelek.

Bagaimana cara Mengisi gambar ke ukuran tertentu menggunakan CSS, dan tidak merentangkannya ?

Contoh gambar isi dan peregangan:

Gambar asli:

Gambar membentang:

Gambar yang Diisi:

Harap perhatikan bahwa dalam contoh gambar Penuh di atas: pertama, gambar diubah ukurannya menjadi 150x255 (rasio aspek terpelihara), dan kemudian dipangkas menjadi 150x100.

Jika Anda ingin menggunakan gambar sebagai latar belakang CSS, ada solusi yang elegan. Cukup gunakan coveratau containdi background-sizeproperti 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>​

Meskipun coverakan memberi Anda gambar yang ditingkatkan, containakan memberi Anda gambar yang diperkecil. Keduanya akan mempertahankan rasio aspek piksel.

http://jsfiddle.net/uTHqs/ (menggunakan sampul)

http://jsfiddle.net/HZ2FT/ (menggunakan isi)

Pendekatan ini memiliki keuntungan menjadi ramah terhadap tampilan Retina sesuai panduan singkat Thomas Fuchs.

Perlu disebutkan bahwa dukungan browser untuk kedua atribut tidak termasuk IE6-8.

Anda dapat menggunakan properti 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" />

Lihat contoh di sini

Ada polyfill untuk IE: https://github.com/anselmh/object-fit

Peningkatan pada jawaban di atas oleh @afonsoduarte ( BUKAN jawaban yang diterima) .
jika Anda menggunakan bootstrap

1. Memberikan width:100%gaya.
   Ini berguna jika Anda menggunakan bootstrap dan ingin gambar merentangkan semua lebar yang tersedia.
   

2. Menentukan heightproperti adalah opsional, Anda dapat menghapus / menyimpannya sesuai kebutuhan

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

3. Omong-omong, TIDAK perlu menyediakan heightdan widthatribut pada imageelemen karena mereka akan ditimpa oleh gaya.
   jadi cukup menulis sesuatu seperti ini.

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

Satu-satunya cara nyata adalah memiliki wadah di sekitar gambar Anda dan gunakan 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%;
}

Sangat menyakitkan dalam CSS untuk melakukan apa yang Anda inginkan dan memusatkan gambar, ada perbaikan cepat di jquery seperti:

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/

Solusi CSS tanpa JS dan tanpa gambar latar:

Metode 1 "margin otomatis" (IE8 + - BUKAN 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/

Metode 2 "mengubah" (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/

Metode 2 dapat digunakan untuk memusatkan gambar dalam wadah dengan lebar / tinggi tetap. Keduanya dapat meluap - dan jika gambar lebih kecil dari wadah itu masih akan terpusat.

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

Metode 3 "pembungkus ganda" (IE8 + - BUKAN 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/

Metode 4 "pembungkus ganda DAN gambar ganda" (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/

• Metode 1 memiliki dukungan yang sedikit lebih baik - Anda harus mengatur lebar ATAU tinggi gambar!
• Dengan metode awalan 2 juga memiliki dukungan yang layak (dari ie9 ke atas) - Metode 2 tidak memiliki dukungan pada Opera mini!
• Metode 3 menggunakan dua pembungkus - dapat meluap lebar DAN tinggi.
• Metode 4 menggunakan gambar ganda (satu sebagai pengganti) ini memberikan beberapa overhead bandwidth tambahan, tetapi bahkan dukungan crossbrowser yang lebih baik.

Metode 1 dan 3 tampaknya tidak berfungsi dengan Firefox

Solusi lain adalah menempatkan gambar dalam wadah dengan lebar dan tinggi yang diinginkan. Dengan menggunakan metode ini Anda tidak perlu mengatur gambar sebagai gambar latar elemen.

Kemudian Anda dapat melakukan ini dengan imgtag dan hanya mengatur lebar dan lebar maks pada elemen.

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>

Sekarang ketika Anda mengubah ukuran wadah gambar akan secara otomatis tumbuh sebesar mungkin tanpa melampaui batas atau mendistorsi.

Jika Anda ingin memusatkan gambar secara vertikal dan horizontal, Anda dapat mengubah css wadah ke:

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

Berikut ini adalah JS Fiddle http://jsfiddle.net/9kUYC/2/

Membangun dari jawaban @Dominic Green menggunakan jQuery, berikut adalah solusi yang harus bekerja untuk gambar yang lebih lebar daripada tinggi atau lebih tinggi dari lebar.

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

Mungkin ada cara yang lebih elegan dalam melakukan JavaScript, tetapi ini berhasil.

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

• Tidak menggunakan latar belakang css
• Hanya 1 div untuk klip itu
• Diubah ukuran menjadi lebar minimum daripada menjaga rasio aspek yang benar
• Pangkas dari tengah (vertikal dan horizontal, Anda dapat menyesuaikannya dengan bagian atas, kiri & transformasi)

Hati-hati jika Anda menggunakan tema atau sesuatu, mereka akan sering mendeklarasikan img max-width pada 100%. Anda harus membuat tidak ada. Uji itu :)

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

Saya membantu membangun plugin jQuery yang disebut Fillmore , yang menangani background-size: coverbrowser di yang mendukungnya, dan memiliki shim bagi mereka yang tidak. Coba lihat!

Saya pikir sudah terlambat untuk jawaban ini. Pokoknya berharap ini akan membantu seseorang di masa depan. Saya menghadapi masalah memposisikan kartu dalam sudut. Ada kartu yang ditampilkan untuk berbagai acara. Jika lebar gambar acara besar untuk kartu, gambar harus ditampilkan dengan memotong dari dua sisi dan tinggi 100%. Jika tinggi gambar panjang, bagian bawah gambar dipotong dan lebar 100%. Inilah solusi css murni saya untuk ini:

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

Coba sesuatu seperti ini: http://jsfiddle.net/D7E3E/4/

Menggunakan wadah dengan overflow: disembunyikan

EDIT: @Dominic Green mengalahkan saya.

Ini akan Mengisi gambar ke ukuran tertentu, tanpa merentangkannya atau tanpa memotongnya

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

Untuk menyesuaikan gambar dalam layar penuh coba ini:

background-repeat: round;

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

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