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 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 resize image automatically on browser width resize but keep same height?
I've used Perfect Full Page Background Image to accomplish this on a previous site.
You can use background-size: cover; if you only need to support modern browsers.
CSS image dynamic resizing
If you want your background image to scale according to the window size, why not use the following:
body {
background-image: url("bckg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
So the important line is this: background-size: cover;
this ensures that the background image "covers" the visible portion of the page
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 resize image dimension when browser resize?
Take the google page speed insights with a grain of salt. They aren't always practical.
Google is suggesting that if you're going to set a size of 729x74, you should save the image at that resolution instead of sending them a larger image and scaling it down.
Google also offers a PageSpeed module for apache and nginx if that's an option: https://developers.google.com/speed/pagespeed/module
This module will do some of these optimizations on the server before it sends content to the client.
Related Topics
Fixed Position Div Inside Div Container
Align Mat-Cards Content (Image, Text and Buttons)
What Does the "+" (Plus Sign) CSS Selector Mean
Background Color of Text in Svg
How to Make a Div Expand Vertically to Wrap the Content Within It
How to Make Bootstrap 4 Columns Have a Height of 100%
Vuetify: Fit V-Image Within the Screen Size
How to Set the Height of Vuetify Card
How to Make an Element Fill the Remaining Viewport Height
Angular Material Mat-Drawer in Full Height Flex, Content Overflow Auto
How to Remove Border of Drop Down List:Css
Spring Boot + Thymeleaf CSS Is Not Applied to Template
How to Break a List into Columns
Fill Remaining Vertical Space With CSS Using Display:Flex