Rumah > Artikel > hujung hadapan web > Bagaimanakah Saya Boleh Mengubah Saiz Imej agar Sesuai dengan Tetingkap Penyemak Imbas Tanpa Herotan?

Bagaimanakah Saya Boleh Mengubah Saiz Imej agar Sesuai dengan Tetingkap Penyemak Imbas Tanpa Herotan?

Barbara Streisandasal: 2024-11-01 15:51:55976semak imbas

How Can I Resize an Image to Fit the Browser Window Without Distortion?

Ubah Saiz Imej agar Sesuai Tetingkap Penyemak Imbas tanpa Herotan

Mengubah saiz imej agar muat dengan tetingkap penyemak imbas ialah tugas biasa dengan penyelesaian yang kelihatan mudah. Walau bagaimanapun, mematuhi keperluan khusus, seperti mengekalkan perkadaran dan mengelakkan pemangkasan, boleh menimbulkan cabaran.

Penyelesaian tanpa Bar Skrol dan Javascript (CSS sahaja)

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

Ini penyelesaian menggunakan Grid CSS untuk memastikan bekas imej menduduki ketinggian penuh tetingkap. Imej itu kemudiannya ditetapkan untuk dimuatkan secara mendatar dan menegak dalam bekas itu, mengekalkan nisbah bidangnya dan mengelakkan penambahan bar skrol.

Penyelesaian dengan JQuery

Jika Javascript tersedia , pendekatan lain ialah:

<code class="html"><html>
<body>

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

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

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

Di sini, ketinggian badan ditetapkan agar sepadan dengan ketinggian tingkap, memastikan sifat ketinggian maksimum pada imej berfungsi dengan betul. Acara mengubah saiz tetingkap juga dikendalikan untuk melaraskan ketinggian badan dan saiz imej secara automatik apabila saiz tetingkap diubah.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Saiz Imej agar Sesuai dengan Tetingkap Penyemak Imbas Tanpa Herotan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css Property Event 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 Membuat Teks Berkelip dengan jQuery?Artikel seterusnya：Bagaimana untuk Membuat Teks Berkelip dengan jQuery?

Artikel berkaitan

Lihat lagi