From the course: CSS: Images

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Use CSS to crop an image

Use CSS to crop an image

From the course: CSS: Images

Start my 1-month free trial Buy for my team

Use CSS to crop an image

“

- [Illustrator] In the previous movie, I said you could use object fit and object position to crop an image to display the way you want. However, there's a limit to this. You'll remember object fit will display the image so that it fills out the shortest value either horizontal or vertical. In this case because the image is wider than the displayed box, that means we are seeing the full height of the image right now and I can't change that using object fit or object position. If I try to move the image vertically using object position nothing will happen. What if I want to zoom in on this image and do an actual crop, like what you would do in Photoshop or another photo editing tool. In that case, I need to turn to CSS Transforms. CSS Transforms allow us to rotate, scale, skew or translate, meaning move along the X or Y-axis, any element and it does all of this in the coordinate space of CSS. The cool thing about…

Contents