How to resize an image to fit in the browser window?
Update 2018-04-11
Here's a Javascript-less, CSS-only solution. The image will dynamically be centered and resized to fit the window.
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.imgbox {
display: grid;
height: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
</style>
</head>
<body>
<div class="imgbox">
<img class="center-fit" src='pic.png'>
</div>
</body>
</html>
The [other, old] solution, using JQuery, sets the height of the image container (body
in the example below) so that the max-height
property on the image works as expected. The image will also automatically resize when the client window is resized.
<!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" language="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>
Note: User gutierrezalex packaged a very similar solution as a JQuery plugin on this page.
How to make an image auto resize to fit browser window with relation to height
It is not clear what you tried so far and we don't see any code. I'll try to answer anyway and perhaps it'll help you.
First of all, when you working with responsive layouts, always try to size your elements with viewport height and width
. This helps you keep your content relative to the browser size - no matter if resized nor how large the screen is.
This code might help you insert a responsive image to your site:
div {
width:80vw;
height:80vh;
}
img {
max-width:100%;
height:auto;
max-height:100%;
}
Working example here
In this example is div
sized 80% of both window's height and width, so it never exceeds the viewport. Max. measures of img
are 100% of the div
and height:auto;
secures that it preserves its aspect ratio. Image then fits a div to the max allowed. You can comfortably center the image by setting display:table-cell; vertical-align:middle; text-align:center;
to the DIV.
Another solution would be:
background-image:url(' ');
background-size:contain;
background-repeat:no-repeat;
background-position:center;
Check it out here
How to make an image fit the browser window using grid?
I suggest that you use the CSS unit type vw
to set the max-width of the image, like so:
img {
margin-left: auto;
border: solid black;
max-height: 100%;
max-width: 100vw;
height: auto;
}
Read more at MDN: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages
How to fit an image according to screen size
if you want to keep aspect ratio then put width:100% and height:auto
if you want to cover whole parent element then height:100% and width:100%
How to resize background image size when resizing the browser window?
This is what they have in their site as style:
background: url(assets/images/background2.jpg) no-repeat fixed black;
background-size: 100%
Related Topics
Html5 Doctype Putting IE9 into Quirks Mode
Wait Until an HTML5 Video Loads
Multiple Forms or Multiple Submits in a Page
Most Common Way of Writing a HTML Table with Vertical Headers
Iframe with External Page Not Working
Svg Coordinates with Transform Matrix
What Was the <Xmp> Tag Used For
Loading an External Font via Inline CSS
Min-Width and Max-Height for Table Attributes
How to Make a Chevron Arrow Using CSS
Create a Slanted Edge to a Div
How to Truncate Table Cells, But Fit as Much as Content Possible
Youtube: How to Present Embed Video with Sound Muted
Dynamically Aligning Pseudo Element According to Parent Height
Disable Double-Tap "Zoom" Option in Browser on Touch Devices