Center overflown image horizontally

Question

I need to center an horizontally image with min-width: 968px in a smaller container. I'm able to insert it with the size I want, and cut it like I want with overflow: hidden...
I've tried all the normal ways, and nothing seems to work...
Any ideas?

The question you've said were indeed similar, but the answer in both of them wasn't working for me... Thank you anyway

You have already asked this question earlier today and the answer stays the same. If you have trouble executing the proper way to do this, make a fiddle so we can show you how to do this. — Steyn, Oct 08 '15 at 15:39
@SteynvanEsveld the question changed, the answer didn't work for what I want... So, no, it's not the same question... — André Mata, Oct 08 '15 at 15:48

score 1 · Accepted Answer · answered Oct 08 '15 at 15:38

1

To contain a big image in a smaller container, you must decide to "visually resize" image with something as:

img
{
  max-width:100%;
  height:auto;
  dsplay:block;
}

or alternatively you can transform it in a background leaving its original dimensions, but obviously cutting overflows, so:

div
{
   width:300px;
   height:200px;
   background-image:url(image.jpg)
   background-position:50% 50%;
}

answered Oct 08 '15 at 15:38

Luca Detomi

5,564
7
52
77

1

I had already tried both, but when I was reading your answer, I was thinking that the second option you gave was perfect if the div size wasn't the same as the img. then I remembered that if I had one image as the background and had another with opacity 0 in the div to get the variable size, it would work perfectly... And it does... – André Mata Oct 08 '15 at 16:11

score 0 · Answer 2 · answered Oct 08 '15 at 15:42

You can use position absolute for this. Don't forget to set position to relative on the parent. Then you can use the translate trick to ensure your image will be centered horizontally and vertically (see the example) :

div {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  overflow: hidden;
}
div img {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div>
  <img src="http://lorempixel.com/400/200/" alt="" />
</div>

Center overflown image horizontally

2 Answers2