Rumah > Artikel > hujung hadapan web > Bagaimana Membuat Imej Sesuai dengan Sempurna dalam Tetingkap Penyemak Imbas Tanpa Bar Skrol?

Bagaimana Membuat Imej Sesuai dengan Sempurna dalam Tetingkap Penyemak Imbas Tanpa Bar Skrol?

Patricia Arquetteasal: 2024-11-01 07:33:02660semak imbas

How to Make an Image Fit Perfectly in a Browser Window Without Scrollbars?

Cara Mengubah Saiz Imej agar Sesuai dengan Sempurna dalam Tetingkap Penyemak Imbas

Mengubah saiz imej agar muat dalam lingkungan tetingkap penyemak imbas boleh menimbulkan cabaran, terutamanya apabila pelbagai faktor seperti saiz tetingkap, dimensi imej dan bar skrol perlu dipertimbangkan.

Isu:

Matlamatnya adalah untuk mengekalkan imej nisbah aspek, menghalang penampilan bar skrol dan pastikan imej menempati ruang maksimum yang tersedia tanpa melebihi saiz asalnya.

Penyelesaian CSS Sahaja:

Kemas kini ( 2018-04-11):

<code class="css">* { margin: 0; padding: 0; }
.imgbox { display: grid; height: 100%; }
.center-fit { max-width: 100%; max-height: 100vh; margin: auto; }</code>

Kod ini mencapai hasil yang diingini semata-mata melalui CSS. Imej berada dalam bekas yang dipaparkan grid yang menduduki ketinggian penuh tetingkap. Imej itu sendiri menyesuaikan kedua-dua lebar dan tingginya agar muat dalam bekas ini, mengekalkan nisbah bidang sambil memastikan ia berada di tengah dalam tetingkap.

Penyelesaian JQuery:

<code class="html"><!DOCTYPE html>
<html>
<head>
<style>
    * { padding: 0; margin: 0; }

    .fit { /* set relative picture size */
        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">
    function set_body_height() { // set body height = window height
        $('body').height($(window).height());
    }

    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });
</script>

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

Penyelesaian JQuery melibatkan penetapan ketinggian badan agar sepadan dengan ketinggian tetingkap. Ini membolehkan sifat ketinggian maksimum imej berfungsi seperti yang dimaksudkan, mengehadkan imej dalam sempadan tetingkap. Selain itu, imej diubah saiz secara automatik apabila saiz semula tetingkap.

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

jquery css while Property function this issue

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 mengalih keluar Sempadan daripada IFrame dalam IE6?Artikel seterusnya：Bagaimana untuk mengalih keluar Sempadan daripada IFrame dalam IE6?

Artikel berkaitan

Lihat lagi