Cara Mengubah Saiz Imej Secara Dinamik agar Sesuai dalam Tetingkap Penyemak Imbas
Menyisipkan imej dalam tetingkap penyemak imbas sambil mengekalkan nisbah aspeknya, memastikan ia dipaparkan sepenuhnya, dan menghalang bar skrol sering menimbulkan cabaran. Untuk menangani isu ini dengan berkesan, berikut ialah dua pendekatan komprehensif.
1. Penyelesaian CSS Sahaja (Kemas Kini 2018)
Memanfaatkan reka letak grid CSS dan keupayaan jidar automatik, kaedah ini menawarkan penyelesaian komprehensif CSS sahaja. Coretan kod di bawah secara dinamik memusatkan dan mengubah saiz imej agar sesuai dengan tetingkap penyemak imbas:
<code class="html"><div class="imgbox"> <img class="center-fit" src="pic.png"> </div></code>
CSS:
<code class="css"> * { margin: 0; padding: 0; } .imgbox { display: grid; height: 100%; } .center-fit { max-width: 100%; max-height: 100vh; margin: auto; }</code>
2. Penyelesaian JavaScript/jQuery
Pendekatan ini bergantung pada jQuery untuk menetapkan ketinggian bekas imej secara dinamik, membenarkan sifat ketinggian maksimum pada imej berfungsi seperti yang dimaksudkan. Imej melaraskan saiznya secara automatik apabila tetingkap penyemak imbas diubah saiznya.
<code class="html"><body> <img class="center fit" src="pic.jpg"> </body></code>
<code class="javascript"> // Set body height to window height function set_body_height() { $('body').height($(window).height()); } // On DOM ready and window resize, adjust body height $(document).ready(function() { $(window).bind('resize', set_body_height); set_body_height(); });</code>
Nota: Penyelesaian serupa tersedia sebagai pemalam jQuery yang dicipta oleh pengguna gutierrezalex.
Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Imej Secara Dinamik agar Sesuai dengan Tetingkap Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!