Bagaimana Membuat Saiz Imej Secara Automatik dengan Tetingkap Penyemak Imbas Menggunakan CSS?

Saiz Imej Secara Automatik Menggunakan Saiz Pelayar CSS

Masalah:

Imej anda tidak secara automatik ubah saiz apabila anda mengubah saiz tetingkap penyemak imbas anda. Anda telah mencuba kod berikut tetapi ia tidak berfungsi:

HTML:

<code class="html">

    
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css" type="text/css" media="screen">
    
    
        <div id="icons">
            <div id="contact">
                <img src="/static/imghwm/default1.png" data-src="img/icon_contact.png" class="lazy" alt="">
            </div>
            <img src="/static/imghwm/default1.png" data-src="img/icon_links.png" class="lazy" alt="">
        </div>
    
</code>

CSS:

<code class="css">body {
    font-family: Arial;
    font-size: 11px;
    color: #ffffff;
    background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
    background-size: cover;
}

#icons {
    position: absolute;
    bottom: 22%;
    right: 8%;
    width: 400px;
    height: 80px;
    z-index: 8;
    transform: rotate(-57deg); 
    -ms-transform: rotate(-57deg); 
    -webkit-transform: rotate(-57deg); 
    -moz-transform: rotate(-57deg);
}

#contact { 
    float: left; 
    cursor: pointer; 
}


img { 
    max-width: 100%; 
    height: auto; 
}</code>

Penyelesaian:

Untuk menjadikan imej anda fleksibel, tambahkan sifat CSS berikut:

<code class="css">img {
    max-width: 100%;
    height: auto;
    width: auto; /* for IE8 compatibility */
}</code>

Dengan menetapkan lebar maksimum kepada 100%, imej tidak akan melebihi lebar bekasnya. Menetapkan ketinggian kepada auto membolehkan imej mengekalkan nisbah bidang sambil mengubah saiz. Lebar: auto9 override diperlukan untuk keserasian IE8.

Dengan sifat ini tersedia, sebarang imej yang anda tambah menggunakan teg img akan diubah saiznya secara automatik agar sesuai dengan saiz tetingkap penyemak imbas anda.

Demo JSFiddle:

Anda boleh melihat demonstrasi langsung penyelesaian ini dalam JSFiddle ini:

https://jsfiddle.net/mjc5ue0z/

Tiada JavaScript diperlukan untuk penyelesaian ini. Ia berfungsi dalam versi terkini Chrome, Firefox dan IE (versi yang diuji).

Atas ialah kandungan terperinci Bagaimana Membuat Saiz Imej Secara Automatik dengan Tetingkap Penyemak Imbas Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!