55

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

enter image description here

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.

web-tiki
  • 99,765
  • 32
  • 217
  • 249
Bryce
  • 6,440
  • 8
  • 40
  • 64

4 Answers4

103

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: enter image description here

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:

enter image description here

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.

enter image description here

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! */
}
Bryce
  • 6,440
  • 8
  • 40
  • 64
  • 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. – rdarioduarte Mar 11 '14 at 18:13
  • @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? – Marcus Jun 04 '14 at 14:05
  • @BryceHanscomb Change width to anything other than 200px. Should it not be centered still? Maybe I'm misunderstanding the requirements... http://imgur.com/A2JAqRr – Marcus Jun 05 '14 at 16:11
  • 1
    Note: inside a `table-cell` you need to center the `img`, not the `.content`. – StackExchange saddens dancek Aug 22 '14 at 11:13
  • @isal Alternative that works for both: http://stackoverflow.com/questions/18673900/how-to-center-and-crop-an-image-to-square-with-css – Petah Oct 12 '14 at 19:28
  • 2
    This is weird, it only works above a certain size. [See this fiddle](http://jsfiddle.net/ha65p/17/) and resize the pane up and down. – Simon East Jun 22 '15 at 23:21
  • 1
    you are star, looking for this answer from good few days ... https://stackoverflow.com/questions/46159476/how-to-create-focus-point-for-each-image-in-image-slider-for-full-screen-display – K.Z Sep 17 '17 at 09:57
  • add this ` img { height: 100% } ` – Arbahud Rio Daroyni Jul 24 '20 at 20:25
20

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! */
}
Gabriela Gabriel
  • 504
  • 4
  • 10
  • To support older versions of Safari add vendor prefixed transform too: -webkit-transform: translate(-50%,0); See this post: http://stackoverflow.com/questions/29864790/why-on-safari-the-transform-translate-doesnt-work-correctly – Matthew Aug 27 '15 at 00:00
  • This should be the accepted answer, because it supports large size images. – Jaylord Ferrer Aug 27 '18 at 17:59
1

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%;
jbdeguzman
  • 926
  • 7
  • 11
0

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;
 }
Thunder
  • 19
  • 5