Home > Article > Web Front-end > How to Dynamically Resize an Image to Fit the Browser Window?
How to Dynamically Resize an Image to Fit the Browser Window?
- Linda HamiltonOriginal
- 2024-10-31 01:17:29687browse
How to Dynamically Resize an Image to Fit in the Browser Window
Encasing an image within a browser window while maintaining its aspect ratio, ensuring it's fully displayed, and preventing scrollbars often poses a challenge. To address these issues effectively, here are two comprehensive approaches.
1. CSS-Only Solution (2018 Update)
Leveraging CSS's grid layout and auto-margining capabilities, this method offers a comprehensive, CSS-only solution. The code snippet below dynamically centers and resizes the image to fit the browser window:
<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. JavaScript/jQuery Solution
This approach relies on jQuery to set the height of the image container dynamically, allowing the max-height property on the image to function as intended. The image adjusts its size automatically as the browser window is resized.
<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>
Note: A similar solution is available as a jQuery plugin created by user gutierrezalex.
The above is the detailed content of How to Dynamically Resize an Image to Fit the Browser Window?. For more information, please follow other related articles on the PHP Chinese website!