How to Fit an Image Snugly Within a Div While Preserving Aspect Ratio?

Maintaining Aspect Ratio of Image within a Div

Question:

How can one fit an image snugly within a div element while preserving its aspect ratio, ensuring that no portion of the image is cropped or distorted?

Answer:

To achieve this using CSS, utilize the following properties:

img {
  max-height: 100%;
  max-width: 100%;
}

1. max-height: 100%;: Sets the maximum height of the image to 100% of its container div. This ensures that the image will not overflow the div's height.
2. max-width: 100%;: Similar to max-height, but for width. This sets the maximum width of the image to 100% of its container div.

Explanation:

By combining these two properties, the image will effectively shrink to fit within the div while maintaining its original aspect ratio. The image will scale down proportionately, ensuring that no parts are cropped or distorted.

Additional Notes:

1. If you want to center the image within the div, add the following CSS property:

img {
  ...
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. Alternatively, you can use the object-fit property to achieve similar results, although it may not be supported in all browsers.

The above is the detailed content of How to Fit an Image Snugly Within a Div While Preserving Aspect Ratio?. For more information, please follow other related articles on the PHP Chinese website!