chipsterva69 chipsterva69 - 2 months ago 26
CSS Question

Centering oversized image in responsive div

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.

Answer

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

Comments