Rumah > Artikel > hujung hadapan web > Bagaimana Membuat Saiz Imej Secara Automatik dengan Tetingkap Penyemak Imbas Menggunakan CSS?

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

Linda Hamiltonasal: 2024-10-26 04:09:02318semak imbas

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>

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!

JavaScript firefox css chrome html for while auto using this https

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：## Bolehkah Jadual Menyelesaikan Cabaran Mengulang Pengepala dan Pengaki pada Halaman Bercetak?Artikel seterusnya：## Bolehkah Jadual Menyelesaikan Cabaran Mengulang Pengepala dan Pengaki pada Halaman Bercetak?

Artikel berkaitan

Lihat lagi