Horje
How to Fill a Box with an Image Without Distorting in CSS ?

Filling a box with an image without distorting it can be a common requirement in web design. The goal is to ensure that the image covers the entire box while maintaining its aspect ratio. In this article, we will explore two methods to achieve this using CSS.

Example 1: Using background-size: cover Property

The background-size: cover property is a simple and effective way to fill a box with an image without distorting it. It ensures that the image covers the entire box while preserving its aspect ratio, even if the box’s dimensions do not match the image’s aspect ratio.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Image Fill Box without Distortion</title>
    <style>
        .image-box {
            width: 300px;
            height: 200px;
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png');
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
  
<body>
    <div class="image-box"></div>
</body>
  
</html>

Output: In this example, the .image-box class sets the dimensions of the box and applies the image as a background. The background-size: cover property ensures that the image fills the entire box without distortion, and background-position: center centers the image within the box.

fill-box

Example 2: Using object-fit: cover with an img Element

The object-fit: cover property can be used with an img element to achieve a similar effect. This property ensures that the image fills its container without distortion.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Image Fill Box without Distortion</title>
    <style>
        .image-box {
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
  
        .image-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
  
<body>
    <div class="image-box">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
            alt="Image">
    </div>
</body>
  
</html>

Output: In this example, the .image-box class sets the dimensions of the box and hides any overflow. The img element is styled to fill the box with width: 100% and height: 100%. The object-fit: cover property ensures that the image covers the box without distortion. The image is centered within the box using absolute positioning and the transform: translate(-50%, -50%) property.

fill-box


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
What is the Cursor Property in CSS? What is the Cursor Property in CSS?
Which Property Sets Outline Color in CSS? Which Property Sets Outline Color in CSS?
Which Property sets all Outline Properties at once in CSS? Which Property sets all Outline Properties at once in CSS?
How to Set the Fixed Width of a Span Element in CSS ? How to Set the Fixed Width of a Span Element in CSS ?
What is the use of the Keyframes Rule in CSS Animations? What is the use of the Keyframes Rule in CSS Animations?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 15



 

Horje