How center an absolute element (img) that's wider than its parent div?

Question

I'm trying to center an absolute positioned img inside a relative positioned div and the image is bigger than its parent(in a 767px window or lower). But the image does have a fixed width of 767px. What makes it hard for me is that parent div does not have a fixed width, it has a 100% width so I'd have to somehow generate the correct amount of pixels for the 'left' attribute on each resize but I don't know how. I tried setting percentages but with no succes when resizing.

I have been able to somewhat do it with javascript but I'd rather have a css solution since the javascript doesn't work consistently for me.

I need to be able to center the img when the parent div gets smaller than 767px and the img always remains 767px within the div and has a height of 257px.

Any help is appreciated!

html code:

<div class="item">
  <img src="...">
</div>

css:

.item{
position:relative;
height:257px;
overflow:hidden;
}

.item img{
min-width:767px;
position:absolute;
}

Why the `min-width` on the image – do you want the image to be stretched to fill the whole container width, if the container is wider than 767px? — CBroe, Jul 25 '15 at 02:33
When it's wider than 767px it did needed to fill the whole container. With 'min-width' the image remains 767px like I wanted but with normal 'width' the image will shrink with the window when the windows get smaller than 767px — Noob17, Jul 25 '15 at 02:48

score 14 · Answer 1 · answered Dec 20 '18 at 03:42

14

A way of doing this without having to hard-code half the width.

For instance, maybe your child element has a variable width that you cannot predict

You can do this instead:

left: 50%;
transform: translateX(-50%);

answered Dec 20 '18 at 03:42

Jack

3,271
11
48
57

3

I think this is even simpler than the accepted answer. – Dávid Molnár Mar 05 '19 at 12:56

score 7 · Accepted Answer · answered Jul 25 '15 at 02:22

7

By combining relative and absolute units and left and margin-left:

.item img {
    left: 50%;
    margin-left: -383.5px; /* Half of the width */
    min-width: 767px;
    position: absolute;
}

This only because you mentioned in your question that the image’s width was fixed at 767px; if it’s really just a minimum and can grow larger, you’ll need to use a different approach.

answered Jul 25 '15 at 02:22

Ry-

218,210
55
464
476

8

You can do this without using fixed pixel values as well: `left:-500%; right:-500%; margin:auto;` – you “drag” the image out of the container to both sides, and the auto margin then centers it within that range again. http://jsfiddle.net/sru60agp/1 – CBroe Jul 25 '15 at 02:42
The percentage value just has to be “big enough”, so that even for a really narrow container it still drags the image far enough to both sides, since the percentage is in reference to the container’s width. So for a _really_ small container it won’t work any more after a certain point – if you manually set the container width to around 70px in my fiddle using dev tools, and then further decrease it, you will see the effect. – CBroe Jul 25 '15 at 02:43
So the usefulness depends on whether your container can ever get _that_ narrow. You can fight it up to a certain point by using a higher percentage – percentage × container width must equal at least half of the image width. But using really extreme percentage (say like 5000%) might start to have a negative effect on rendering performance. – CBroe Jul 25 '15 at 02:46
@CBroe awesome thank you! Been searching for a while and your comment works for my issue. – Matt Pierce Oct 19 '17 at 12:16

How center an absolute element (img) that's wider than its parent div?

2 Answers2