Rumah > Artikel > hujung hadapan web > Bagaimana untuk Membuat Imej Sesuai dengan Tetingkap Penyemak Imbas?

Bagaimana untuk Membuat Imej Sesuai dengan Tetingkap Penyemak Imbas?

DDDasal: 2024-10-30 06:29:27444semak imbas

How to Make an Image Fit the Browser Window?

Cara Memasukkan Imej ke Tetingkap Penyemak Imbas: Panduan Komprehensif

Dalam bidang pembangunan web, memaparkan imej dengan lancar dalam penyemak imbas tingkap menimbulkan cabaran yang unik. Menentukan saiz imej yang sesuai untuk menampung kedua-dua tetingkap penyemak imbas dan dimensi imej kekal sebagai dilema biasa. Artikel ini menyelidiki selok-belok mengubah saiz imej agar sesuai dengan tetingkap penyemak imbas dengan berkesan, menangani selok-belok yang terlibat secara menyeluruh.

Objektif untuk Saiz Semula Imej

Untuk mencapai integrasi yang harmoni daripada imej ke dalam reka letak web, kami mesti memenuhi kriteria berikut:

Dimensi tetingkap penyemak imbas, selalunya tidak diketahui, tidak seharusnya memacu saiz imej.
Dimensi asal imej yang tidak diketahui tidak seharusnya menghalang proses mengubah saiz.
Imej harus mengekalkan nisbah bidangnya, mengekalkan perkadaran asalnya.
Imej hendaklah dipaparkan sepenuhnya dalam tetingkap, tanpa pemotongan atau herotan.
Bar skrol adalah tidak diingini dan tidak sepatutnya muncul jika imej sesuai dengan tetingkap.
Imej harus bertindak balas secara dinamik kepada perubahan dalam dimensi tetingkap, mengisi ruang yang tersedia tanpa melebihi saiz asalnya.

Penyelesaian CSS Sahaja

Bagi mereka yang mencari penyelesaian CSS tulen, kod berikut dengan anggun memusatkan dan mengubah saiz imej berdasarkan dimensi tetingkap penyemak imbas:

<code class="html"><html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: 100%;
        }
        .center-fit {
            max-width: 100%;
            max-height: 100vh;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="imgbox">
    <img class="center-fit" src='pic.png'>
</div>
</body>
</html></code>

Penyelesaian berasaskan jQuery

Sebagai alternatif, penyelesaian berkuasa jQuery ini memastikan bahawa bekas imej, badan dalam kes ini, mempunyai ketinggian yang sama dengan ketinggian tetingkap penyemak imbas, membenarkan maksimum imej -tinggi untuk berfungsi seperti yang dimaksudkan:

<code class="html"><!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .fit {
            max-width: 100%;
            max-height: 100%;
        }
        .center {
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>

<img class="center fit" src="pic.jpg">

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
    function set_body_height() {
        $('body').height($(window).height());
    }
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });
</script>

</body>
</html></code>

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

jquery css if for function this

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：Bagaimana untuk Melaksanakan Ellipsis dalam Teks untuk Mengekalkan Kehadiran Di Tengah-tengah Turun Naik Lebar?Artikel seterusnya：Bagaimana untuk Melaksanakan Ellipsis dalam Teks untuk Mengekalkan Kehadiran Di Tengah-tengah Turun Naik Lebar?

Artikel berkaitan

Lihat lagi