Resize images with CSS

Designers always face the need to resize images and also avoid deterioration, whilst maintaining the images’s quality at the same time. There are so many ways to achieve this but I’d say that CSS is the simplest of all. Let’s learn how to resize images with CSS.

  1. Wrap the image in a container as shown below
    <div id="image-container>
    <!-- Your image goes here -->
    </div><!-- End Image Container -->
  2. Create a block of CSS code that includes height, width, and overflow properties. Adjust the values as needed. See the example below.

    #image-container {
    width: 200px;  /* Adjust as needed */
    height: 150px;  /* Adjust as needed */
    overflow: hidden; /* Cuts off any part of the image that goes beyond the given width */
    }
    
  3. The CSS for the images must have 2 of the properties given below with the value of the
    width set to 100% or the exact measure of #image-container and the height set to auto. See the example below.

    #image-container img {
    width: 100%;  /* Equals the height of #image-container */
    height: auto;  /* Must be auto, to avoid deterioration. 
    It allows the image a breathing space as it adjust to the given dimensions */
    }
    

That’s that, we’re done. If you have any questions, please use the comment form below.

Leave a Reply