Bagaimanakah Saya Boleh Mengubah Saiz Imej agar Sesuai dengan Tetingkap Penyemak Imbas Tanpa Herotan?-tutorial css-php.cn

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

Barbara Streisand

Lepaskan： 2024-11-01 15:51:55

asal

990 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!