Buat lebar gambar 100% dari induk div, tetapi tidak lebih besar dari lebar sendiri

125

Saya mencoba untuk mendapatkan gambar (ditempatkan secara dinamis, tanpa batasan pada dimensi) menjadi selebar div induknya, tetapi hanya sepanjang lebar itu tidak lebih lebar dari lebarnya sendiri sebesar 100%. Saya sudah mencoba ini, tetapi tidak berhasil:

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

Banyak gambar-gambar ini jauh lebih luas daripada div induknya, itulah sebabnya saya ingin mereka mengubah ukuran sesuai, tetapi ketika gambar kecil muncul di sana dan ditingkatkan di luar dimensi normal, itu benar-benar terlihat mengerikan. Apakah ada cara untuk melakukan ini?

html width css Alfonso
sumber
5
Apa yang terjadi jika Anda hanya menentukan max-width: 100%?
Fyodor Soikin
@Fyodor Soikin - Berikan itu sebagai jawaban dan saya akan memilih Anda.
Gert Grenander
Akan lebih baik untuk mempertimbangkan browser mana yang mendukung max-width.
kbrimington
kbrimington memang membawa poin yang bagus ke meja. Menurut reference.sitepoint.com/css/max-width#compatibilitysection , implementasi IE8 bermasalah.
Alfonso

Jawaban:

221

Cukup tentukan max-width: 100%saja, itu harus dilakukan.

Fyodor Soikin
sumber
1
Chromium tampaknya hanya membiarkannya 100% terlepas dari konteksnya. Mungkin saya harus berhenti terus-menerus melihat pekerjaan saya pada perangkat lunak beta. Terima kasih!
Alfonso
Bagaimana Anda melakukan ini tanpa menggunakan max-width: 100%. Di React-Native, persentase tidak mungkin digunakan.
Croolsby
@ Collolsby Anda dapat menggunakan persentase dalam reaksi-asli, tetapi dengan nilai string, seperti ini '100%'
Rafael Hovsepyan
9

Menemukan posting ini di pencarian Google, dan itu menyelesaikan masalah saya berkat balasan @jwal, tapi saya membuat satu tambahan untuk solusinya.

img.content.x700 {
  width: auto !important; /*override the width below*/
  width: 100%;
  max-width: 678px;
  float: left;
  clear: both;
}

Dengan cara di atas, saya mengubah lebar-max ke dimensi wadah konten tempat gambar saya berada. Dalam hal ini adalah: lebar kontainer - bantalan - boarder = lebar maks

Dengan cara ini gambar saya tidak akan keluar dari div yang berisi, dan saya masih bisa mengapung gambar dalam div konten.

Saya sudah menguji di IE 9, FireFox 18.0.2 dan Chrome 25.0.1364.97, Safari iOS dan tampaknya berfungsi.

Tambahan: Saya menguji ini pada gambar 1024px lebar ditampilkan di 678px (lebar maks), dan gambar 500px lebar ditampilkan di 500px (lebar gambar).

mattauckland
sumber
1
Menggunakan width:auto !important;memperbaiki masalah di IE11 untuk saya di mana gambar akan lebih besar dari wadahnya dan IE11 tidak menurunkan gambar. Pengaturan ini di imgpemilih mengurutkan masalah di IE11. Namun pengaturan width:100%;tanpa aturan lain tidak melakukan apa pun di IE11. Jadi "override" harus dimasukkan agar gambar diturunkan ke ukuran wadahnya.
lowtechsun
3

Mengatur lebar 100% adalah lebar penuh div yang ada di dalamnya, bukan gambar berukuran penuh asli. Tidak ada cara untuk melakukannya tanpa JavaScript atau bahasa scripting lain yang dapat mengukur gambar. Jika Anda dapat memiliki lebar tetap atau tinggi tetap div (seperti lebar 200px) maka seharusnya tidak terlalu sulit untuk memberikan gambar rentang untuk diisi. Tetapi jika Anda menempatkan gambar 20x20 piksel dalam kotak 200x300 piksel itu masih akan terdistorsi.

Amanda
sumber
1
berikan contoh yang bisa digunakan bila memungkinkan. Ini direkomendasikan. :)
bhb
1

Dalam gaya garis - ini bekerja untuk saya setiap saat

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>
Nelles
sumber
0

Anda harus mengatur lebar maks dan jika mau, Anda juga dapat mengatur beberapa bantalan di salah satu sisi. Dalam kasus saya, max-width: 100% bagus tapi gambarnya tepat di sebelah ujung layar.

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/
Menggabungkan
sumber
0

Saya juga mengalami masalah yang sama, tetapi saya mengatur nilai tinggi di CSS saya ke otomatis dan itu memperbaiki masalah saya. Juga, jangan lupa untuk melakukan properti tampilan.

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }
Noah Franco
sumber
hanya fyi..Anda dapat menghapus ketinggian: otomatis dan lebar: otomatis. max-height dan max-width adalah hal yang sama.
Debbie Kurth
-1

Jika gambar lebih kecil dari orang tua ...

.img_100 {
  width: 100%;
}
SandroMarques
sumber
-4

Saya akan menggunakan properti display: table-cell

Inilah tautannya

sekutu
sumber