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


107

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.)


Gunakan kueri media CSS3 atau penangan kejadian window.onresize javascript. w3schools.com/jsref/event_onresize.asp
Shahid

Jika Anda menggunakan bootstrap tambahkan kelas seperti ini class = "img-thumbnail". Sekian untuk itu.
VivekDev

Jawaban:


179

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).


Saya menguji tautan jsfiddle dengan Opera 11 dan beberapa Firefox terbaru dan sementara itu mengubah ukuran gambar dengan baik ketika jendela menyusut, gagal melakukannya ketika jendela tumbuh melebihi 650px
GDR

3
@GDR Saya tidak ingin gambar tumbuh melebihi ukuran aslinya, itu hanya akan berpiksel dan terlihat jelek. Jika Anda memiliki kebutuhan untuk membuat lebih besar, saya akan mulai dengan gambar yang lebih besar.
Kurt Schindler

Oke, kemudian saya salah berasumsi bahwa inilah inti dari pertanyaan ini, maaf.
GDR

2
Menyetel max-width menjadi 100% dan height ke auto tidak melakukan apa-apa bagi saya - Saya memang bekerja dengan sebuah container. Bungkus gambar dalam sebuah div, setel tinggi / lebar maksimal, dan biarkan gambar (#div img {}) menjadi lebar 100% dan tinggi 100%.
Mave

1
Sihir macam apakah ini?! Ini luar biasa!
Leonardo Wildt

24

2018 dan solusi yang lebih baru:

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

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.


Terima kasih! Bagaimana cara menentukan vh dan vw jika saya memiliki gambar dengan ukuran berbeda?
Herman Toothrot

Hai @HermanToothrot, apakah Anda ingin mempertahankan rasio aspek saat menggunakan unit viewport?
roberrrt-s

@Roberrrt mengatakan saya memiliki beberapa gambar dengan ukuran berbeda dan dalam blok sebaris, dan ingin menjaga rasio aspek semuanya tetapi mengaturnya pada tinggi atau lebar yang sama.
Herman Toothrot

Baik melakukan lebar: 100% dan tinggi-maksimal: 50vh atau terbalik
roberrrt-s

@Roberrrt width: 100% sepertinya tidak terlalu berpengaruh. Saya hanya perlu menebak vh, dalam kasus saya 50 terlalu banyak dan 40 memaksimalkan tinggi semua gambar.
Herman Toothrot

11
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


6

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

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

5

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>

1
jQuery tidak diperlukan untuk masalah sederhana seperti itu. Mengapa memuat 50 KB + (seluruh pustaka) bermanfaat pada beberapa baris JS?

1
tentu, Anda sepenuhnya benar, itu saya s why Ibertanya kepadanya, apakah dia menggunakan jQuery karena jika dia melakukannya mungkin ide yang bagus, tambahkan saja pluginnya!
Arthur Neves

jadi tanpa JS tidak mungkin? Saya menemukan solusi sederhana seperti ini unstoppablerobotninja.com/search/… , namun saya tidak berhasil menerapkannya sepenuhnya di template saya
depi

4

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.



2

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


0

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.

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.