CODEWITHSUNDEEP
jquerycssimageresponsive-design
Steffi
Steffi

Reputation: 7087

How to resize image on window resize in CSS?

I want to resize an image when I resize the window.

My window is 1600x1200. My image is 1000x500.

I tried to use background-size: cover, it works but the image quality is very poor.

So is there an alternative to keep the image to 1000px max if the window is larger than 1000px and resize based on the screen if it is less than 1000px (such as background-size: cover) ?

Upvotes: 2

Views: 194

Answers (3)

Ganesh Rengarajan
Ganesh Rengarajan

Reputation: 2006

Detection of screen dimensions

var width = screen.width;
var height = screen.height; 
var img = document.getElementById(image_id); 
img.height = img.height * width / img.width;
img.width = width;

CSS:

img{ width: 100% }

Upvotes: 0

PaoloCargnin
PaoloCargnin

Reputation: 442

Yep, with media query

@media(min-width:1000px){
.class{background-size: auto}
}
@media(max-width:999px){
.class{background-size: cover}
}

Upvotes: 6

Petar Simic
Petar Simic

Reputation: 54

Hy, try this:

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

Upvotes: -1

Related Questions