html - resize images using % in css -

I'm trying to create a liquid web layout by using% for many things as I can . While resizing the images, I hit a collision.

Both:

  & lt; Img src = "source" style = "width: 20%; height: 20%;" />  

and

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

They do not work properly with attribte height, they convert the width of the image to 20% of the container, but the image height relative to the image size (trying to make the square

height and width of an image Percentage of attributes works with containers included in it. Therefore, trying to insert the bus to achieve the fluid effect, give the height and width of a container and image around the IMG: 100% and now you should change the container height and width in percent. Here is an example

  & lt; Div style = "width: 500px; height: 100px;" & Gt; & Lt; Img src = "your-image-link-here" style = "height: 100%; width: 100%;" & Gt; & Lt; / Div & gt;  

With this, the height and width of your image will be 500 * 100.

UPDATE

  & lt; Div id = "wrapper" style = "border: 1px solid red, width: 900px; height: 400px;" & Gt; & Lt; Div id = "imgcontainer" style = "width: 100%; height: 50%;" & Gt; & Lt; Img src = "ur-img" style = "height: 100%; width: 100%;" & Gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Example with cover and container with examples.