Bagaimana cara mengisi div dengan gambar sambil menjaganya tetap proporsional?

Saya menemukan utas ini - Bagaimana Anda meregangkan gambar untuk mengisi <div> sambil mempertahankan rasio aspek gambar? - Itu tidak sepenuhnya yang saya inginkan.

Saya memiliki div dengan ukuran tertentu dan gambar di dalamnya. Saya ingin selalu mengisi div dengan gambar terlepas dari apakah gambar tersebut lanskap atau potret. Dan tidak masalah jika gambarnya terpotong (div itu sendiri memiliki overflow tersembunyi).

Jadi jika gambar potret saya ingin widthmenjadi 100%dan height:autosehingga tetap proporsional. Jika gambarnya lanskap saya ingin heightmenjadi 100%dan width to beotomatis. Kedengarannya rumit bukan?

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

Karena saya tidak tahu bagaimana melakukannya, saya hanya membuat gambaran singkat tentang apa yang saya maksud. Saya bahkan tidak bisa menggambarkannya dengan tepat.

Jadi, saya rasa saya bukan yang pertama menanyakan hal ini. Namun saya tidak dapat menemukan solusi untuk ini. Mungkin ada beberapa cara CSS3 baru untuk melakukan ini - saya memikirkan flex-box. Ada ide? Mungkin lebih mudah dari yang saya harapkan?

Jika saya benar-benar memahami apa yang Anda inginkan, Anda dapat membiarkan atribut lebar dan tinggi di luar gambar untuk mempertahankan rasio aspek dan menggunakan flexbox untuk melakukan pemusatan untuk Anda.

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

<div class="fill">
    <img src="https://lorempizza.com/320/240" alt="" />
</div>

JSFiddle di sini

Saya berhasil menguji ini di IE9, Chrome 31, dan Opera 18. Tetapi tidak ada browser lain yang diuji. Seperti biasa, Anda harus mempertimbangkan kebutuhan dukungan khusus Anda.

Ini agak terlambat tetapi saya hanya memiliki masalah yang sama dan akhirnya menyelesaikannya dengan bantuan pos stackoverflow lain ( https://stackoverflow.com/a/29103071 ).

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

Semoga ini masih membantu seseorang.

Ps: Juga bekerja bersama dengan properti css max-height , max-width , min-width dan min-height . Ini sangat berguna dengan menggunakan unit panjang seperti 100% atau 100vh / 100vw untuk mengisi wadah atau seluruh jendela browser.

Pertanyaan lama tetapi perlu pembaruan karena sekarang ada cara.

Jawaban berbasis CSS yang benar adalah dengan menggunakan object-fit: cover, yang berfungsi seperti background-size: cover. Pemosisian akan ditangani oleh object-positionatribut, yang defaultnya adalah pemusatan.

Tetapi tidak ada dukungan untuk itu di browser IE / Edge, atau Android <4.4.4. Selain itu, object-positiontidak didukung oleh Safari, iOS atau OSX. Polyfills memang ada, object-fit-images tampaknya memberikan dukungan terbaik.

Untuk detail lebih lanjut tentang cara kerja properti, lihat artikel Trik CSS tentangobject-fit penjelasan dan demo.

Ini harus melakukannya:

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}

Semua jawaban di bawah memiliki lebar dan tinggi tetap, yang membuat solusi "tidak responsif".

Untuk mencapai hasil tetapi gambar tetap responsif saya menggunakan berikut ini:

1. Di dalam wadah tempatkan gambar gif transparan dengan proporsi yang diinginkan
2. Beri tag gambar inline css background dengan gambar yang ingin Anda ubah ukurannya dan crop

HTML:

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​

Anda dapat melakukannya dengan menggunakan properti css flex. Silakan lihat kode di bawah ini

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}

<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

Pertimbangkan untuk menggunakan background-size: cover(IE9 +) bersama dengan background-image. Untuk IE8-, ada polyfill .

Coba ini:

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

Semoga ini membantu

Anda dapat menggunakan div untuk mencapai ini. tanpa tag img :) harap ini membantu.

.img{
	width:100px;
	height:100px;
	background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
.img1{
	width:100px;
	height:100px;
	background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}

<div class="img">	
</div>
<div class="img1">	
</div>

Satu-satunya cara saya mencapai skenario "kasus terbaik" yang dijelaskan, adalah dengan menempatkan gambar sebagai latar belakang:

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

Berikut adalah jawaban dengan dukungan untuk menggunakan IE object-fitsehingga Anda tidak akan kehilangan rasio

Menggunakan cuplikan JS sederhana untuk mendeteksi apakah object-fititu didukung dan kemudian mengganti imguntuk asvg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}

img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

Catatan: Ada juga beberapa object-fitpolyfill di luar sana yang akan object-fitberfungsi.

Berikut beberapa contohnya:

• object-fit-images
• constancecchen / object-fit-pollyfill
• Polyfill untuk properti CSS object-fit

Di sini Anda memiliki contoh kerja saya. Saya telah menggunakan trik yaitu mengatur gambar sebagai latar belakang wadah div dengan background-size: cover dan background-position: center center

Saya telah menempatkan gambar dengan lebar: 100% dan opacity: 0 membuatnya tidak terlihat. Perhatikan bahwa saya menampilkan gambar saya hanya karena saya memiliki minat khusus untuk memanggil acara klik anak.

Harap dicatat bahwa meskipun saya menggunakan sudut, itu sama sekali tidak relevan.

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

Hasilnya adalah salah satu yang Anda definisikan sebagai optimal di semua kasus

Nilai CSS object-fit: coverdan object-position: left centerproperti sekarang mengatasi masalah ini.

Cukup perbaiki tinggi gambar & berikan lebar = otomatis

img{
    height: 95vh;
    width: auto;
}