Information Communication Technology ICT – 12 Images | e-Consult

The CSS property to use for maintaining proportional sizing of an image is object-fit.

How it works: The object-fit property determines how the content of an or other object will fit within its container. It offers several values, including:

• contain (default): The image is scaled down to fit within the container while maintaining its aspect ratio. This means the entire image will be visible, and there may be empty space (letterboxing or pillarboxing) around it.
• cover : The image is scaled to fill the entire container, maintaining its aspect ratio. Some parts of the image may be cropped to fit.
• fill : The image stretches to fill the container, ignoring its aspect ratio. This can distort the image.
• scale-down : The image is scaled down to contain if it's larger than the container, and scaled up to cover if it's smaller.

By using object-fit: cover;, the designer can ensure the image always fills the space, even if it requires cropping, while maintaining the correct proportions.