Cropping and Resizing Images with CSS

I recently found myself in a situation where I had to resize and/or crop images dynamically for a pre-defined position on a webpage. My image resources were dynamic and auto update was set for images drawn onto the page from the images folder for a given design. Sick and tired of your images distorting or deteriorating on page load? This post is for you.

The following is an example of how you can create a list that contain images of various sizes, when you need them all to appear the exact same size on page:

Let us start with a very basic HTML layout with a heading and content:

<h4>My holiday</h4>
<ul class=”pics”>	
<li class=”reframe”> <img src=”image1” alt=”A beautiful scene”/></li>
  <li class=”reframe”><img src=”image2” alt=”A lovely time”/></li>
 	<li class=”reframe”><img src=”image3” alt=”Lovely”/></li>
</ul>  

We can apply a class off “.pics” on our unordered list containing our images. Each list element may also be given a class of “.reframe”.

.reframe {
  height: 100px;
  width: 150px;
  overflow: hidden;
}

Our images will all have a set width of 150px and height of 100px. Set the overflow property of this containing element to allow “overflow”. What this means is that the base container keeps its structure and that any overflow will be hidden within the boundaries of the container. This will give the image the appearance of being “cropped” within the container.

The following styling may now be applied to each cropped image:

.reframe img {
  height: auto;
  width: 150px;
}

By giving the image the same width as the width of the containing element and then setting the height property to auto, the image will resize to the size of the containing element while leaving it some “breathing room” in the case of overflow (which means distortion or deterioration of image quality will be prevented).

The same can be achieved in landscape examples by setting the height of the image to the height of the container and the width to auto. Now, set your display property to “inline” or “inline-block”.

Even though this is rather simple tutorial, if you want to learn more about responsive design, feel free to check out Understanding the Basics of "Responsive Design" & the @media CSS At-rule!