Bagaimana cara mengisi div dengan gambar sambil menjaganya tetap proporsional?


120

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.

masukkan deskripsi gambar di sini

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?


Mengapa Anda ingin menggunakan css3 padahal Anda masih bisa melakukannya dengan mudah dengan javascript? Pergilah dengan js
matey

1
Belum diuji tetapi Anda dapat mencoba menyetel min-height dan min-width menjadi 100%? Itu setidaknya harus mengisi kotak dan menjaganya tetap proporsional
chrisbulmer

Jawaban:


150

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.


Di IE9 gambar tidak berada di tengah secara vertikal atau horizontal dengan metode ini, itu disejajarkan ke atas dan ke kiri. i59.tinypic.com/ouo77s.png
Mike Kormendy

1
Ini memiliki masalah pada iPad, tampaknya safari meregangkan gambar hingga 100% dari tingginya tetapi tidak mempertahankan properti min-width.
Sean

14
Ini tampaknya memperbesar gambar kecil untuk diisi, tetapi tidak turun agar pas. Setidaknya ketika saya menggunakan gambar besar itu hanya menunjukkan sebagian kecil saja.
Johncl

12
Untuk memiliki gambar besar yang diperkecil agar pas, saya menggunakan yang berikut pada gambar:.fill img { min-height:100%; min-width: 100%; object-fit: cover; }
Peter G

pahlawan super! : D
Garis M Suero

47

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.


apakah ini solusi crossbrowser?
candlejack

1
objek-fit: penutup; bekerja dengan baik! Info browser (tidak berfungsi di IE): css-tricks.com/almanac/properties/o/object-fit Solusi fallback untuk IE: medium.com/@primozcigler/… MS sedang mengimplementasikannya: developer.microsoft.com / en-us / microsoft-edge / platform / status /…
Kaah

Saya kira menambahkan object-positionaturan ke kelas ini akan membantu di sini. Hanya catatan tambahan.
Taha Paksu

8

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.


8

Ini harus melakukannya:

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

Berfungsi cukup baik untuk saya, dalam kasus saya, saya hanya perlu menambahkan posisi: absolute dan top: 0, dan beberapa z-index juga
byroncorrales

7

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

Saya menggunakan gambar latar belakang untuk seluruh situs web perusahaan portofolio desain saya sehingga saya dapat memiliki ukuran latar belakang: sampul. Sekarang SEO gambar saya kacau karena gambar latar belakang tidak dikenali oleh Google. Saya berharap saya telah mengkodekannya dengan cara lain.
Alex Banman

5

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>


1
Ini HANYA berfungsi jika Anda menghapus properti lebar dan tinggi seperti yang disinggung di beberapa jawaban lain.
Chiwda

3

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


Bukankah ini membutuhkan background-url? Bisakah Anda menjelaskan lebih lanjut? Bisakah ini bekerja dengan <img src = "" /> seperti yang dinyatakan dalam pertanyaan?
harsimranb

@harsimranb Tentu saja, background-sizemasuk akal hanya dengan background-imageditentukan juga (saya telah memperbarui jawaban saya sesuai). Ini tidak berlaku untuk IMGelemen.
Marat Tanalin

Ini jawaban terbaik. Sederhana dan memiliki dukungan browser yang bagus. Semua solusi lain sangat kompleks atau tidak berfungsi di IE (9).
JoostS

1

Coba ini:

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

Semoga ini membantu


1

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>


1

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

1

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:


0

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



0

.image-wrapper{
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}
.image-wrapper img {
    object-fit: contain;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
<div class="image-wrapper">
  <img src="">
</div>


-3

Cukup perbaiki tinggi gambar & berikan lebar = otomatis

img{
    height: 95vh;
    width: auto;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.