Centering oversized image in responsive div

Question

I have been researching this issue for the last few days, and while have found several solutions that work well in static layouts, I am having a problem resolving in responsive design.

We have a series of banner images that we use on our home page, and are trying to get them to appear centered on the image behind text on smaller mobile screens. I can solve this for fixed widths, but we need to make this responsive.

Here is what the current rendition of my CSS code looks like:

#mainSlideshow .item img {
    display: block;
    width: auto !important;
    max-width: none !important;
    height: 350px !important; 
    overflow: hidden;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform:  translateX(-50%);
-ms-transform:  translateX(-50%);
-o-transform:  translateX(-50%);
transform:  translateX(-50%);
}
#mainSlideshow .item .carouselImgHold {position: relative; }

The challenge appears to be the movement left - right now, the image just shifts to the left 50% of the img width (no surprise). How do I program the CSS to drift the image only the amount necessary to center the image in the nested div tag?

Many thanks in advance.

Can you also provide your HTML? Or better yet, a JSFiddle? – Adam Milecki Oct 01 '15 at 19:19 — Adam Milecki, Oct 01 '15 at 19:19

score 1 · Answer 1 · answered Oct 01 '15 at 19:27

It would be nice if you could give us an example but lets try. :)

My suggestion is to set image as background-image instead of linking it. So that would look like:

#mainSlideshow .item{
  background-image:url("path-to-image/image.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

That way you will have not stretched image covering the #mainSlideshow .item .Read more about that here

score 0 · Answer 2 · answered Oct 01 '15 at 19:20

0

I think you can achieve this to ways.

img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

Or

img {
    width: 50%
    left: 50%
}

answered Oct 01 '15 at 19:20

Rafael Prato

162
2
10

score 0 · Accepted Answer · answered Oct 01 '15 at 19:31

You may use text-align and negative margins if IMG stands alone on its line.

http://codepen.io/anon/pen/PPpYzM

.oversizedImage {
  text-align: center;
}

.oversizedImage img {
  margin: 0 -100%;
}
/* demo purpose */

.oversizedImage {
  width: 50%;
  margin: auto;
  border: solid;
  box-shadow: 0 0 150px 100px white;/* you should use overflow:hidden; here it only shows how much is outside :) */
}

.oversizedImage img {
  vertical-align: top;
  /* instead default baseline to avoid gap under */  
  position: relative;
  z-index: -1;
}

<div class="oversizedImage">
  <img src="http://lorempixel.com/1200/200"/>
</div>

It is only a guess since we miss your HTML

Centering oversized image in responsive div

3 Answers3