Search code examples
javascriptcssimagescreen-resolution

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..

Solution

  • 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%;