image in fixed size div and keep aspect by cropping

Question

I have a fixed size div (for example 300px X 300px) and I would like to display images from different sizes on the div and will fill the div completely and keep the image aspect by cropping the sides f the unfitted length. The original picture is the bottom picture and the expected div image is the top image.

Answer 1

If you're not worried about supporting IE (Edge should get support soon) , object-fit: cover should do exactly what you want. Then you can use object-position to position how it's cropped, though the default center center is probably what you would want for most cases.

object-fit - MDN

object-position - MDN

If IE does matter (or you need Edge support now), then using a background image gets you access to background-size and background-position which allows you to do basically the same thing.

Answer 2

  div.container{ height: 300px; width: 300px; background-position: center center; border: 1px solid #333; } 

 <div class="container" style="background-image: url(https://thumb1.shutterstock.com/display_pic_with_logo/150592/150592,1233424894,3/stock-photo-beautiful-spring-flowers-24206422.jpg);"> </div> <br/> <img src="https://thumb1.shutterstock.com/display_pic_with_logo/150592/150592,1233424894,3/stock-photo-beautiful-spring-flowers-24206422.jpg"/>