Working with Images
We know that images play a crucial role on a web page. It helps to show the content effectively and clearly. Sometimes, the content image may have a size that is either bigger or smaller than the container it is intended to be displayed in, or its aspect ratio may be different from that of the container. We will consider how to show an image in the best manner.
object-fit
object-fit specifies how an image should be resized to fit its container.
object-fit: fill | contain | cover | none | scale-down;
fillstretches the image to fill the container, regardless of its aspect ratio. This may cause the image to be cropped or distorted;containscales the image to fit the container while preserving its aspect ratio. This may result in empty space around the image if the container and the image have different aspect ratios;coverscales the image to completely cover the container while preserving its aspect ratio;nonedisplays the image at its original size, regardless of the size of the container. This may cause the image to overflow the container;scale-downscales the image down to fit the container if it is larger than the image's natural size, or displays the image at its natural size if it fits within the container.
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<img
class="original-image"
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/work+with+image+example.jpg"
alt="a chipmunk with a cup stands on the ground"
/>
<p class="card-text">original size</p>
<ul class="cards-list">
<li class="card">
<div class="image-wrapper">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/work+with+image+example.jpg"
alt="a chipmunk with a cup stands on the ground"
/>
</div>
<p class="card-text">object-fit: fill</p>
</li>
<li class="card">
<div class="image-wrapper">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/work+with+image+example.jpg"
alt="a chipmunk with a cup stands on the ground"
/>
</div>
<p class="card-text">object-fit: contain</p>
</li>
<li class="card">
<div class="image-wrapper">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/work+with+image+example.jpg"
alt="a chipmunk with a cup stands on the ground"
/>
</div>
<p class="card-text">object-fit: cover</p>
</li>
<li class="card">
<div class="image-wrapper">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/work+with+image+example.jpg"
alt="a chipmunk with a cup stands on the ground"
/>
</div>
<p class="card-text">object-fit: none</p>
</li>
<li class="card">
<div class="image-wrapper">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/work+with+image+example.jpg"
alt="a chipmunk with a cup stands on the ground"
/>
</div>
<p class="card-text">object-fit: scale-down</p>
</li>
</ul>
</body>
</html>
.original-image {
display: block;
margin: 0 auto;
}
.cards-list {
list-style: none;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.cards-list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.card {
width: 280px;
padding: 10px;
margin: 10px;
border: 1px solid blueviolet;
}
.image-wrapper {
width: 280px;
height: 200px;
border: 1px solid red;
}
.card:nth-child(1) img {
width: 280px;
height: 200px;
object-fit: fill;
}
object-position
object-position specifies the position of the image inside its container. It accepts two values: a horizontal value and a vertical value or we can use reserved words.
object-position: x y;
index.html
index.css
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<img
class="original-image"
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/work+with+image+example.jpg"
alt="a chipmunk with a cup stands on the ground"
/>
<p class="card-text">original size</p>
<ul class="cards-list">
<li class="card">
<div class="image-wrapper">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/work+with+image+example.jpg"
alt="a chipmunk with a cup stands on the ground"
/>
</div>
<p class="card-text">object-fit: fill</p>
<p class="card-text">object-position: center</p>
</li>
<li class="card">
<div class="image-wrapper">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/work+with+image+example.jpg"
alt="a chipmunk with a cup stands on the ground"
/>
</div>
<p class="card-text">object-fit: contain</p>
<p class="card-text">object-position: 10px 50px</p>
</li>
<li class="card">
<div class="image-wrapper">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/work+with+image+example.jpg"
alt="a chipmunk with a cup stands on the ground"
/>
</div>
<p class="card-text">object-fit: cover</p>
<p class="card-text">object-position: right bottom</p>
</li>
<li class="card">
<div class="image-wrapper">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/work+with+image+example.jpg"
alt="a chipmunk with a cup stands on the ground"
/>
</div>
<p class="card-text">object-fit: none</p>
<p class="card-text">object-position: left top</p>
</li>
<li class="card">
<div class="image-wrapper">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/work+with+image+example.jpg"
alt="a chipmunk with a cup stands on the ground"
/>
</div>
<p class="card-text">object-fit: scale-down</p>
<p class="card-text">object-position: initial</p>
</li>
</ul>
</body>
</html>
.original-image {
display: block;
margin: 0 auto;
}
.cards-list {
list-style: none;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.cards-list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.card {
width: 280px;
padding: 10px;
margin: 10px;
border: 1px solid blueviolet;
}
.image-wrapper {
width: 280px;
height: 200px;
border: 1px solid red;
}
.card:nth-child(1) img {
width: 280px;
height: 200px;
object-fit: fill;
object-position: center;
Everything was clear?
Thanks for your feedback!
Section 5. Chapter 3
