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

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

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

Share