Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set an equivalent of the \"cover\" Value of the background-size Property for an img Tag?
When creating responsive images in web design, a common requirement is to make the image fill the entire container while preserving its aspect ratio. The CSS background-size: cover; property achieves this effect for background images, but for inline images using the <img> tag, we need a different approach. The object-fit property provides an equivalent solution for <img> elements.
Syntax
Following is the syntax for using object-fit on an <img> element
img {
width: 100%;
height: 100%;
object-fit: cover;
}
For comparison, the equivalent background image syntax is
.container {
background-image: url('image.jpg');
background-size: cover;
background-position: center;
}
Using object-fit: cover with img Tags
The object-fit: cover CSS property controls how an <img> element's content fills its container. It scales the image to cover the entire container while maintaining aspect ratio, cropping parts that don't fit exactly like background-size: cover.
Basic Container Example
Following example shows how to create a fixed-size container with a cover-fitted image
<!DOCTYPE html>
<html>
<head>
<title>Object-fit Cover Example</title>
<style>
.image-container {
width: 400px;
height: 250px;
border: 2px solid #333;
margin: 20px auto;
}
.cover-image {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Image with object-fit: cover</h2>
<div class="image-container">
<img src="https://www.tutorialspoint.com/static/images/hero.png"
alt="Cover Image Example"
class="cover-image" />
</div>
</body>
</html>
The image fills the entire 400x250px container, maintaining its aspect ratio while cropping excess portions.
Full Viewport Example
Following example demonstrates a full-screen cover image using viewport units
<!DOCTYPE html>
<html>
<head>
<title>Full Viewport Cover Image</title>
<style>
body {
margin: 0;
padding: 0;
}
.fullscreen-image {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
.overlay-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
background: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 8px;
}
</style>
</head>
<body>
<img src="https://www.tutorialspoint.com/static/images/hero.png"
alt="Fullscreen Cover Image"
class="fullscreen-image" />
<div class="overlay-content">
<h1>Welcome to TutorialsPoint</h1>
<p>Content overlaid on cover image</p>
</div>
</body>
</html>
The image covers the entire viewport (100vw × 100vh) with overlay content positioned on top.
Using Background Images as an Alternative
Background images with background-size: cover remain useful for decorative images or when you need more control over positioning. Unlike <img> tags, background images don't affect document flow and are better for pure presentation.
Background Image Example
Following example shows the traditional background image approach
<!DOCTYPE html>
<html>
<head>
<title>Background Cover Example</title>
<style>
body {
margin: 0;
padding: 0;
}
.background-container {
width: 100%;
height: 100vh;
background-image: url('https://www.tutorialspoint.com/static/images/hero.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
.content {
background: rgba(255, 255, 255, 0.9);
padding: 30px;
border-radius: 10px;
text-align: center;
max-width: 500px;
}
</style>
</head>
<body>
<div class="background-container">
<div class="content">
<h2>Background Image with Cover</h2>
<p>This content is positioned over a background image that uses background-size: cover.</p>
</div>
</div>
</body>
</html>
The background image covers the full container while content can be easily positioned on top using flexbox.
Comparison of Approaches
Following table compares object-fit: cover with background-size: cover
| Feature | object-fit: cover | background-size: cover |
|---|---|---|
| HTML Element | <img> tag | <div> or any container |
| Accessibility | Supports alt attributes | Purely decorative |
| SEO Benefits | Images are indexed by search engines | Not indexed as content images |
| Content Flow | Part of document flow | Positioned independently |
| Browser Support | IE 16+ (modern browsers) | All browsers including older IE |
| Use Case | Content images, galleries | Hero sections, decorative backgrounds |
Other object-fit Values
Besides cover, the object-fit property supports other values for different image fitting behaviors
Example Multiple object-fit Values
<!DOCTYPE html>
<html>
<head>
<title>Object-fit Values Comparison</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
font-family: Arial, sans-serif;
}
.image-box {
text-align: center;
}
.image-box img {
width: 200px;
height: 150px;
border: 2px solid #ddd;
display: block;
margin-bottom: 10px;
}
.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }
</style>
</head>
<body>
<div class="container">
<div class="image-box">
<img src="https://www.tutorialspoint.com/static/images/hero.png"
alt="Fill" class="fill">
<p><strong>fill</strong> (default)</p>
</div>
<div class="image-box">
<img src="https://www.tutorialspoint.com/static/images/hero.png"
alt="Contain" class="contain">
<p><strong>contain</strong></p>
</div>
<div class="image-box">
<img src="https://www.tutorialspoint.com/static/images/hero.png"
alt="Cover" class="cover">
<p><strong>cover</strong></p>
</div>
<div class="image-box">
<img src="https://www.tutorialspoint.com/static/images/hero.png"
alt="None" class="none">
<p><strong>none</strong></p>
</div>
<div class="image-box">
<img src="https://www.tutorialspoint.com/static/images/hero.png"
alt="Scale Down" class="scale-down">
<p><strong>scale-down</strong></p>
</div>
</div>
</body>
</html>
This example demonstrates how each object-fit value affects the same image within identical 200×150px containers.
Conclusion
Use object-fit: cover on <img> elements to achieve the same visual effect as background-size: cover while maintaining semantic HTML and accessibility benefits. Choose <img> tags for content images and background images for purely decorative purposes. Both approaches effectively create responsive, aspect-ratio-preserving images that fill their containers.
1K+ Views
