There are several ways to crop an image in CSS; however, the simplest and most effective of these are:
Using object-fit:
When using object-fit: cover, we can easily crop the image and still maintain the picture’s aspect ratio.
You can use object-fit along with object-position to crop an image in CSS. Try setting the object-fit property on an image to none and then set object-position: 50% 50%. This will center the image in the container. The first number specifies how far from the left to put the image and the second specifies how far from the top to put the image.
Using background-image:
Set the <div> you want your image to be in to have a background-image: url(<insert url here>) property. In addition, set the background-size to cover to crop it so that the aspect ratio is maintained. The background-position is defaulted to top left.
The only problem with using this one is accessibility concerns. Background-images are not necessarily read by screen readers, so if the image used is important to the overall purpose of the site, I would either describe what’s going on in the image on your page or choose another option.
Using width and height, margin and overflow:
On the container your <img> is in (probably a <div> of some sort), set the position to relative and overflow to hidden. The relative position essentially puts a fence around the image so it has definitive boundaries and then the overflow property will hide anything that goes beyond that fence.
I’ve demonstrated the different ways you can crop your images in the code editor below:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
h3 {
text-align: center;
margin: 20px;
padding: 20px;
border-top: 1px solid black;
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
div > div {
max-width: 500px;
width: 100%;
align-self: center;
position: relative;
overflow: hidden;
}
img {
width: 100%;
}
div.crop-top img {
margin: -20% auto 0;
}
div.crop-bottom img {
margin: 0 auto -20%;
}
div.crop-vertically img {
margin: -20% auto -20%;
}
div.crop-right img {
width: 120%;
margin: 0 -20% 0 0;
}
div.crop-left img {
width: 120%;
margin: 0 0 0 -20%;
}
div.crop-horizontally img {
width: 180%;
margin: 0 -20% 0;
height: 500px;
}
div.crop-square img {
width: 100%;
}
</style>
</head>
<body>
<div id="app">
<h3>Normal</h3>
<div>
<img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Top Cropped</h3>
<div class="crop-top">
<img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Bottom Cropped</h3>
<div class="crop-bottom">
<img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Bottom and Top Cropped</h3>
<div class="crop-vertically">
<img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Right Cropped</h3>
<div class="crop-right">
<img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Left Cropped</h3>
<div class="crop-left">
<img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Left and Right Cropped</h3>
<div class="crop-horizontally">
<img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Square Crop</h3>
<div class="crop-square">
<img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
</div>
</body>
</html>Be sure to take a look at the class name attributes in the HTML and then take a look at the matching CSS to get a sense of how the margins are being set to show the part of the picture we want to see.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
