CODEWITHSUNDEEP
javascriptcssimagescreen-resolution
sachin11
sachin11

Reputation: 1167

Adjust image sizes based on resolution

I have been developing a website on a 1440*900 resolution monitor..The page has lots of images arranged in grid like structure. The image sizes and spaces between them have been set based on the monitor I was using..But when I tested it in a 1280*800 screen resolution monitor, the images appeared to be too large for the screen(as expected)!! Can anyone suggest how can the image sizes and the spaces between them be adjusted based on the screen resolution of the user.. Thanx..

Upvotes: 0

Views: 7633

Answers (2)

Ben
Ben

Reputation: 3025

You could also try setting the width of the image by percentage relative to the parent container. For example

<div class="imgWrapper">
<img src="something.jpg">
</div>

Then in the css:

.imgWrapper img {
width:100%;
}

If there are constant widths on your images and different widths in different sections:

add max-widths in addition to the width:100%;

Upvotes: 1

Ben
Ben

Reputation: 3025

You can use a combination of css media queries and setting the width of the images in css. So for screen size max width of 1440, css image width would be set to width: 200px; for example. Then for screen size max width 1280, set the image width to something else, like width:120px

Here's a nice media query tutorial: http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Upvotes: 1

Related Questions