Automatically resize images with browser size using CSS
To make the images flexible, simply add
max-width:100%
and
height:auto
. Imagemax-width:100%
andheight:auto
works in IE7,
but not in IE8 (yes, another weird IE bug). To fix this, you need to
addwidth:auto\9
for IE8.source:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
for example :
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
and then any images you add simply using the img tag will be flexible
JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
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.
css - Automatically resize image to fit on screen (without Javascript)
Using the vw
and vh
units in CSS allow you to size things based on the browser viewport rather than parent elements.
If you set the max-width
and max-height
for the image it should constrain the image to be no bigger than the browser viewport size for any browser size.
#image-id {
max-width: 80vw;
max-height: 80vh;
}
How do I auto-resize an image to fit a 'div' container?
Do not apply an explicit width or height to the image tag. Instead, give it:
max-width:100%;
max-height:100%;
Also, height: auto;
if you want to specify a width only.
Example: http://jsfiddle.net/xwrvxser/1/
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
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
Related Topics
Svg in Img Element Proportions Not Respected in IE9
Using CSS, Can You Apply a Gradient Mask to Fade to the Background Over Text
How to Vertically Middle-Align Floating Elements of Unknown Heights
Responsive CSS Styles on Mobile Devices Only
Bootstrap 3 Responsive Table with Fixed First Column
How to Align Left Last Row/Line in Multiple Line Flexbox
Maintain Div Aspect Ratio According to Height
How to Use Template Literals in Tailwindcss to Change Classes Dynamically
Z-Index Does Not Work in Internet Explorer with PDF in Iframe
Set Google Maps Container Div Width and Height 100%
How to Cancel Opacity for a Child Element
How Does the CSS Specificity Work
How to Add a Box-Shadow on One Side of an Element