How to center crop an image (<img>) in fluid width container

Question

How do I get an image to stay centered when its fluid width (percentage based) container is too small to show the whole image?

How can I center the image inside it's container

This means it should show the middle of the image instead of the sides when container is too small.

Mantle

Answer 1

When It Works

You might have a container that holds some content such as two <div>s that are 50% wide each, sitting next to each other. For this example, we can illustrate just one child of the container:

We'll name outer rectangle .container, the inner rectangle .content and the image img. This arrangement is perfectly fine, as long as .content is always wider than img.

When It Breaks

Since we're dealing with percentages and probably working with a responsive design, this may not always be the case. If .content is ever thinner than img, cropping will occur:

The Problem

If the most interesting part of img is in the center, we need to get the browser to crop both edges evenly - leaving the best part of it visible, no matter what width of .content is.

The Solution

Fortunately, a solution is possible. Even better, no extra markup is required.

.content {
    width: 90%; /* or whatever is required */
    text-align: center; /* ensures the image is always in the h-middle */
    overflow: hidden; /* hide the cropped portion */
}

img {
    position: relative; /* allows repositioning */
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */
}

Mantle

Hi Bryce, excellent tutorial, it works for me, but I want to stop by and ask, how does this works? I don't really understand how. Maybe someone can enlighten me. – Condyle

@BryceHanscomb In dev tools "IE9" I'm not seeing the issue... but in a stock VM from modern.ie Win7/IE9 I am seeing the issue. I assume the real IE9 would be trusted over the simulator? – Alrzc

@BryceHanscomb Change width to anything other than 200px. Should it not be centered still? Maybe I'm misunderstanding the requirements... imgur.com/A2JAqRr – Alrzc

Note: inside a table-cell you need to center the img, not the .content. – Masonmasonic

@isal Alternative that works for both: #18674400 – Break

This is weird, it only works above a certain size. See this fiddle and resize the pane up and down. – Doorway

you are star, looking for this answer from good few days ... #46159976 – Albumen

add this ` img { height: 100% } ` – Unskillful

Answer 2

For new browsers, you can translate it

figure{
    width: 100%;
    text-align: center;
    overflow: hidden;
}
img{
    position: relative;
    left: 50%;
    transform: translate(-50%,0)
}

To support IE8, you can still use the technique presented above by @BryceHanscomb.

.no-csstransforms figure img {
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */
}

Predator

To support older versions of Safari add vendor prefixed transform too: -webkit-transform: translate(-50%,0); See this post: #29865290 – Caerleon

This should be the accepted answer, because it supports large size images. – Leatherjacket

Answer 3

If you are anticipating that the image to be displayed will be so much longer than the display container, setting left: 100%; and margin-left: -200%; (from Bryce's answer) might not be enough to get the center part of the image. Just put a bigger percentage for both. Make sure that the other is half of the other though.

left: 500%;
margin-left: -1000%;

Lambard

Answer 4

I had the same problem but the solutions here didn't help me (because I'm displaying inside a table and because I wanted the image to change without having to scale it manually every time as the image was sent by clients)

Here's what I found, much more effecitve and easier :

img {
 object-fit: cover;
 width: 150px;
 height: 150px;
 }

Stillbirth