CSS object-fit Property
When an <img> or <video> has to fit into its container, the CSS object-fit property decides how it gets resized.
You can choose one of these values:
- fill — The default. Stretching or squeezing makes the image fill the container, and its aspect ratio is lost.
- cover — The image fills the container and keeps its aspect ratio, with any overflow cut off if needed.
- contain — The whole image stays inside the container with its aspect ratio intact. Nothing is cut, and empty space may remain.
- none — No resizing happens.
- scale-down — The image is reduced to whichever of
noneorcontaingives the smaller version.
Using object-fit: fill;
With object-fit: fill;, the container gets filled by stretching or squeezing the image, and its aspect ratio is lost.
Example
Prompt
Show an image inside a 200x300px container with a black border, using
object-fit: fill;. The image should stretch to fill the container, ignoring its aspect ratio.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit: fill</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Using object-fit: fill</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Using object-fit: cover;
With object-fit: cover;, the image fills the container at its original aspect ratio, and clipping makes it fit.
Example
Prompt
Show an image inside a 200x300px container with a black border, using
object-fit: cover;. The image should fill the container while preserving its aspect ratio, clipping overflow as needed.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit: cover</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Using object-fit: cover</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Using object-fit: contain;
With object-fit: contain;, nothing gets cut: the image sits inside the container at its original aspect ratio, and any leftover area stays empty.
Example
Prompt
Show an image inside a 200x300px container with a black border, using
object-fit: contain;. The image should fit inside the container while preserving its aspect ratio, leaving empty space if needed.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit: contain</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<h2>Using object-fit: contain</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Using object-fit: none;
With object-fit: none;, the image keeps its size, with no resizing or scaling.
Example
Prompt
Show an image inside a 200x300px container with a black border, using
object-fit: none;. The image should not be resized or scaled.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit: none</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: none;
}
</style>
</head>
<body>
<h2>Using object-fit: none</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Using object-fit: scale-down;
With object-fit: scale-down;, the image is reduced to whichever of none or contain gives the smaller version.
Example
Prompt
Show an image inside a 200x300px container with a black border, using
object-fit: scale-down;. The image should be scaled down to the smallest version of none or contain.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit: scale-down</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: scale-down;
}
</style>
</head>
<body>
<h2>Using object-fit: scale-down</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Another Example
In this layout, two images should each take 50% of the browser width and 100% of the container height.
Without object-fit
Resize the browser and, with no object-fit, the images lose their aspect ratio.
Prompt
Show two images side by side, each taking 50% of the browser width and 100% of a 400px-tall container, without using object-fit. The images should appear stretched/distorted.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Images Without object-fit</title>
<style>
.container {
display: flex;
height: 400px;
}
.container img {
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<h2>Two Images - Without object-fit</h2>
<div class="container">
<img src="img_norway.jpg" alt="Norway">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
With object-fit: cover
Add object-fit: cover; and the images keep their aspect ratio as the browser is resized.
Prompt
Show two images side by side, each taking 50% of the browser width and 100% of a 400px-tall container, using
object-fit: cover; to preserve the aspect ratio of both images.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Images With object-fit: cover</title>
<style>
.container {
display: flex;
height: 400px;
}
.container img {
width: 50%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Two Images - With object-fit: cover</h2>
<div class="container">
<img src="img_norway.jpg" alt="Norway">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>