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 wh开发者_JAVA百科en resizing images.

both:

<img src="source" style="width: 20%; height: 20%;"/>

and

.wall_picture_block img{
width: 20%; 
height: 20%;
}

don't work properly with the height attribte. They resize the image width to 20% of the container but the height stays relative to the image size.(im trying to make squares)

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

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

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

UPDATE

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

Example with a wrapper and the container with the percentages.

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.

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_block img{
    width: 20%; 
    height: auto;
}