resize images using % in css

Question

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:

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

Answer 1

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.

Answer 2

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.