Skip to main content
X

Explore your training options in 10 minutes

CSS Cropped Images

Christina Kopecky - July 01, 2020


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.

Get offers and scholarships from top coding schools illustration

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.

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.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.

Skip to main content