Methods to Reduce Image Height

Examples

1. Using height with width: auto (Recommended for Proportional Resizing) 

Setting one dimension to a fixed value and the other to auto ensures the image maintains its original aspect ratio, preventing stretching. 

img {
  height: 100px; /* Reduces height to 100 pixels */
  width: auto;   /* Automatically adjusts width to maintain aspect ratio */
}

2. Using max-height for Responsive Design

This approach ensures the image is never taller than a specified value, but still scales down proportionally within smaller containers. 

img {
  max-height: 150px; /* Limits max height to 150px */
  width: 100%;       /* Allows width to be responsive to its container */
  height: auto;      /* Ensures aspect ratio is maintained */
}

3. Using object-fit: cover or object-fit: contain within a Container 

This method is useful when you have a fixed-size container and want the image to fill the space without distortion, potentially cropping parts of the image (with cover) or leaving empty space (with contain). 

<div class="container">
  <img src="your-image.jpg" alt="Description">
</div>

.container {
  width: 200px;
  height: 100px; /* The desired reduced height for the display area */
  overflow: hidden; /* Hides any overflowing parts of the image */
}
.container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Resizes to cover the container while maintaining aspect ratio, cropping as needed */
}

To reduce the height of an image using CSS, the primary property is height. Depending on your goal (e.g., specific size, responsiveness, or cropping), you can use several related properties to ensure the image doesn't look stretched. 

1. Basic Resizing

The most direct way to change height is using a fixed length (like px) or a percentage. 

• Fixed Height: img { height: 200px; }.
• Percentage Height: img { height: 50%; } (relative to the parent container). 

2. Proportional Resizing (Recommended)

To reduce height without stretching the image, pair it with width: auto. This tells the browser to calculate the width automatically based on the new height. 

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

3. Responsive Constraints

Use max-height to ensure an image never exceeds a certain height while allowing it to be smaller if its container shrinks. 

• Example: img { max-height: 100%; height: auto; } ensures the image fits within its container's height. 

4. Advanced Fitting with object-fit

If you must set both a specific width and height, use object-fit to control how the image fills that space without distortion. 

• object-fit: contain;: Shrinks the image to fit entirely within the box while keeping its shape.
• object-fit: cover;: Fills the box completely by scaling and cropping the image if necessary. 

5. Background Images

If the image is a background, use background-size. 

• background-size: contain;: Fits the image inside the element.
• background-size: 100px 50px;: Manually sets width and height. 

To reduce the height and width of an image using CSS, the primary properties are width and height, often combined with max-width and height: auto to maintain aspect ratio and ensure responsiveness. 

Key CSS Properties

Common Methods

1. Proportional Resizing (Recommended for responsiveness) 

To resize an image without stretching or squashing it, define only one dimension and let the other adjust automatically using auto. Using max-width is a common technique for responsive design, as it allows the image to scale down on smaller screens but not exceed its original size or container width. 

img {
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto;    /* Maintains the aspect ratio */
}

You can also set a specific, smaller width: 

img {
  width: 300px; /* Sets the width to 300 pixels */
  height: auto; /* Maintains the aspect ratio */
}

2. Fixed Dimensions with Cropping or Fitting: If you need the image to fit a specific fixed-size container (e.g., a thumbnail gallery), you can use the object-fit property. This will resize the image to fill the space without distortion, but it might crop parts of the image (using cover) or leave empty space (using contain). 

.container img {
  width: 200px;
  height: 150px;
  object-fit: cover; /* Resizes to cover the area, might crop */
}

To reduce the height and width of an image in CSS, you primarily use the width and height properties. 

1. Basic Resizing

The most direct way to change dimensions is by setting specific values. 

img {
  width: 200px;  /* Specific width */
  height: 150px; /* Specific height */
}

Note: Setting both to fixed values may distort (stretch or squash) the image if the ratio doesn't match the original. 

2. Proportional Resizing (Best Practice)

To shrink an image while keeping its original shape (aspect ratio), set one dimension and keep the other as auto. 

img {
  width: 300px;
  height: auto; /* Proportional height */
}

3. Responsive Shrinking

To ensure images never get larger than their container but scale down on smaller screens, use max-width. 

img {
  max-width: 100%; /* Shrinks to fit container */
  height: auto;     /* Maintains aspect ratio */
}

4. Advanced Fitting with object-fit

If you must give an image a specific size but don't want it to look stretched, use the object-fit property. 

• contain: Fits the whole image inside the box without cropping.
• cover: Fills the entire box, cropping the edges if necessary.
• scale-down: Shrinks the image if it's larger than the box, but won't upscale it. 

img {
  width: 200px;
  height: 200px;
  object-fit: cover; /* Crops rather than stretches */
}

Pro-tip: For background images, use the background-size property (e.g., background-size: contain;) instead. 

Would you like to know how to crop specific parts of an image instead of just resizing it?