Resize Images Using % In Css

I am trying to create a liquid web layout using % for as many things as i can. I have hit a bump when resizing images. both:

Solution 1:

The percentages in height and width attributes of an image works with the container it is contained in. So to achieve the fluid effect just trying putting in a container around the img and give image height and width: 100%. and now you should be changing the height and width of the container in percentages. Here's an example

<divstyle="width: 500px; height: 100px;"><imgsrc="your-image-link-here"style="height: 100%; width: 100%;"></div>

With this your image will achieve a height and width of 500 * 100.

UPDATE

<divid="wrapper"style="border: 1px solid red; width: 900px; height: 400px;"><divid="imgcontainer"style="width: 100%; height: 50%;"><imgsrc="ur-img"style="height: 100%; width: 100%;"></div></div>

Example with a wrapper and the container with the percentages.

Solution 2:

You should crop the image. Once you use a % for width or height, I think the browser tries to preserve the aspect ratio, regardless of the value for the other dimension.

Solution 3:

If you want the image's width to be a percentage of its container, and for the image to maintain its original aspect ratio, define the width in percentage and set the height to auto:

.wall_picture_blockimg{
    width: 20%; 
    height: auto;
}

Share