Bagaimana Membuat Saiz Imej Secara Automatik dengan Tetingkap Penyemak Imbas Menggunakan CSS?-tutorial css-php.cn

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

Linda Hamilton

Lepaskan： 2024-10-26 04:09:02

asal

432 orang telah melayarinya

How to Make Images Automatically Resize with Browser Window Using 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"><!DOCTYPE html>
<html lang="en">
    <head>
        <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" />
    </head>
    <body>
        <div id="icons">
            <div id="contact">
                <img src="img/icon_contact.png" alt="" />
            </div>
            <img src="img/icon_links.png" alt="" />
        </div>
    </body>
</html></code>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!