Bagaimana cara mengubah ukuran gambar secara dinamis dengan CSS saat lebar / tinggi browser berubah?

Saya bertanya-tanya bagaimana saya bisa mengubah ukuran gambar bersama dengan jendela browser, inilah yang telah saya lakukan sejauh ini (atau unduh seluruh situs dalam ZIP ).

Ini berfungsi dengan baik di Firefox, tetapi ada masalah di Chrome: gambar tidak selalu diubah ukurannya, entah bagaimana tergantung pada ukuran jendela saat halaman dimuat.

Ini juga berfungsi dengan baik di Safari, tetapi terkadang gambar dimuat dengan lebar / tinggi minimum. Mungkin ini disebabkan oleh ukuran gambar, saya tidak yakin. (Jika dimuat dengan baik, coba segarkan beberapa kali untuk melihat bug.)

Ada ide tentang bagaimana saya bisa membuat ini lebih antipeluru? (Jika JavaScript diperlukan, saya juga dapat menerimanya, tetapi CSS lebih disukai.)

Ini dapat dilakukan dengan CSS murni dan bahkan tidak memerlukan kueri media.

Untuk membuat gambar fleksibel, cukup tambahkan max-width:100%dan height:auto. Gambar max-width:100%dan height:autoberfungsi di IE7, tetapi tidak di IE8 (ya, bug IE aneh lainnya). Untuk mengatasinya, Anda perlu menambahkan width:auto\9untuk IE8.

sumber: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Dan jika Anda ingin menerapkan lebar maksimum tetap gambar, cukup letakkan di dalam wadah, misalnya:

<div style="max-width:500px;">
    <img src="..." />
</div>

Contoh JSFiddle di sini . Tidak diperlukan JavaScript. Berfungsi di versi terbaru Chrome, Firefox, dan IE (yang sudah saya uji).

2018 dan solusi yang lebih baru:

Menggunakan unit viewport-relative akan membuat hidup Anda lebih mudah, mengingat kita memiliki gambar kucing:

Sekarang kami ingin kucing ini di dalam kode kami, dengan tetap menghormati rasio aspek:

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

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Sejauh ini tidak terlalu menarik, tetapi bagaimana jika kita ingin mengubah lebar kucing menjadi maksimal 50% dari viewport?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Gambar yang sama, tapi sekarang dibatasi untuk lebar maksimum dari 50vw vw (= pandang lebar) berarti gambar akan X lebar viewport, tergantung pada digit yang disediakan. Ini juga berlaku untuk ketinggian:

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

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Ini membatasi tinggi gambar hingga maksimum 20% dari viewport.

window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

Dalam onresizeacara IE diaktifkan pada setiap perubahan piksel (lebar atau tinggi) sehingga mungkin ada masalah kinerja. Tunda pengubahan ukuran gambar selama beberapa milidetik dengan menggunakan window.setTimeout () javascript.

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

Setel properti ubah ukuran ke keduanya. Kemudian Anda dapat mengubah lebar dan tinggi seperti ini:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

Apakah Anda menggunakan jQuery?

Karena saya melakukan pencarian dengan cepat pada plugin jQuery dan mereka tampaknya memiliki beberapa plugin untuk melakukan ini, periksa yang ini, seharusnya berfungsi:

http://plugins.jquery.com/project/jquery-afterresize

EDIT:

Ini adalah solusi CSS, saya hanya menambahkan style = "width: 100%" , dan bekerja untuk saya setidaknya di chrome dan Safari. Saya tidak punya, jadi cukup uji di sana, dan beri tahu saya, ini kodenya:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

Awalnya, saya menggunakan html / css berikut:

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

<div> 
  <img src="..." />
</div>

Lalu saya menambahkan class="img"ke <div> seperti ini:

<div class="img">
  <img src="..." />
</div>

Dan semuanya mulai bekerja dengan baik.

Anda dapat menggunakan scaleproperti CSS3 untuk mengubah ukuran gambar dengan css:

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

Bacaan Lebih Lanjut :

• Transformasi 2D CSS3
• Transisi Efek Hover CSS3, Transformasi, Animasi

Cukup gunakan kode ini. Yang paling sering dilupakan adalah menentukan lebar-maks sebagai lebar-maksimal gambar

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

Periksa demonstrasi ini http://shorturl.at/nBKVY

Mencoba

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

Hanya bekerja dengan blok tampilan dan blok sebaris, ini tidak berpengaruh pada item fleksibel karena saya baru saja menghabiskan waktu lama untuk mencari tahu.