Bagaimana untuk Membuat Imej Sesuai dengan Tetingkap Penyemak Imbas?-tutorial css-php.cn

Bagaimana untuk Membuat Imej Sesuai dengan Tetingkap Penyemak Imbas?

DDD

Lepaskan： 2024-10-30 06:29:27

asal

443 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!