CSS Cropped Images
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.
Find Your Bootcamp Match
- Career Karma matches you with top tech bootcamps
- Access exclusive scholarships and prep courses
By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.
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.
