One place for hosting & domains

      objectfit

      Cropping Images in CSS With object-fit


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      Introduction

      We often need an image to fit exactly into a certain given dimension, but while keeping its aspect ratio and avoid having a squished image. This wasn’t something that could easily be done using CSS for the longest time. One trick was to resort to using a background image instead to go around the issue. Well the problem is no more with the object-fit property!

      Along with inherit, initial and unset, there are 5 more possible values for object-fit:

      • contain: The image keeps its original aspect ratio, but resized so that the longest of either the height or width can fit in the given dimensions.
      • cover: The image keeps its original aspect ratio and the image area is completely covered.
      • fill: The initial value. The image will fill its given area, even if it means losing its aspect ratio.
      • none: The image is not resized at all, and the original image size fills the given area.
      • scale-down: The smaller of either contain or none.

      Example

      The following image’s original width is 1200px and height is 674px. Here it’s shown at half its size, 600px by 337px:

      Our starting image

      Now we have a problem if we need the image to be the same height, but fit in half the width. The original aspect ratio is lost and the result is a squished image:

      Our image lost its aspect ratio

      object-fit values

      object-fit can fix that issue for us. Let’s showcase the different values:

      object-fit: contain

      .alligator-turtle {
        object-fit: contain;
      }
      
      Our image lost its aspect ratio

      object-fit: cover

      .alligator-turtle {
        object-fit: cover;
      }
      
      Our image lost its aspect ratio

      object-fit: fill

      .alligator-turtle {
        object-fit: fill;
      }
      
      Our image lost its aspect ratio

      object-fit: none

      .alligator-turtle {
        object-fit: none;
      }
      
      Our image lost its aspect ratio

      object-fit: scale-down

      .alligator-turtle {
        object-fit: scale-down;
      }
      
      Our image lost its aspect ratio

      In this particular example, object-fit: cover is probably what will work the best for our needs.

      object-position

      Now, say your image was cropped with object-fit, but the part of the image that’s shown is not positioned as you’d like. You can use the object-position property to control exactly that.

      Let’s start with our object-fit: cover example:

      .alligator-turtle {
        object-fit: cover;
      
        width: 300px;
        height: 337px;
      }
      
      Our image lost its aspect ratio

      Now let’s change the position of the visible part of the image on the X axis so that we see the right-most edge of the image:

      .alligator-turtle {
        object-fit: cover;
        object-position: 100% 0;
      
        width: 300px;
        height: 337px;
      }
      
      Our image lost its aspect ratio

      And finally, here’s what happens if you provide a position that’s out of bounds:

      .alligator-turtle {
        object-fit: cover;
        object-position: -20% 0;
      
        width: 300px;
        height: 337px;
      }
      
      Our image lost its aspect ratio

      Browser Compatibility:
      As of 2020, Can I Use object-fit? tells us 97% of global browsers support it. Internet Explorer 11 does not.



      Source link