Centre and crop an image inside a div

Question

I can't seem to find an answer to this, although some are close.

I have an image that I want to take out the middle of (crop it), a bit like this:

So it's perfectly in the middle and with the same aspect ratio.

All I have managed to do, is crop an image like so:

..where it's connected to the edges.

So basically, I want to have a div of fixed size, with an image inside. This image needs to be zoomed in and centred, with the overflow hidden.

How can I do this?

Have a look at this answer in the dupe link: https://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped/48535434#48535434 — Asons, Jan 31 '18 at 06:08

score 27 · Accepted Answer · edited Jul 16 '21 at 12:11

27

HTML:

<div>
  <img src="https://picsum.photos/600/500" />
</div>

CSS:

div{
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

img{
  position: absolute;
  top: -9999px;
  left: -9999px;
  right: -9999px;
  bottom: -9999px;
  margin: auto;
}

CODEPEN link: http://codepen.io/bra1N/pen/NArjNN

edited Jul 16 '21 at 12:11

Juho Vepsäläinen

26,573
12
79
105

answered Jul 24 '16 at 09:57

ristapk

1,342
3
15
27

Wow! How is this even possible? It works perfectly! And was the only solution that worded for me among the dozens I have checked! – FrancescoMussi Jan 22 '19 at 14:59

Centre and crop an image inside a div

1 Answers1