CODEWITHSUNDEEP
cssinternet-explorergoogle-chromefirefoxmargin
codinforfun
codinforfun

Reputation: 67

Vertical centering a large image inside overflow:hidden div in Firefox

I've seen quite a few postings related to this but none of them seem applicable to my case. I am trying to center a large image so that the vertical overflow occurs evenly on the top and bottom. The image cannot be a background-image.

<div id="container-outer">
  <div id="container-inner">
      <img src="image.png"/>
  </div>
</div>

And the css...

#container-outer {
  position: relative;
  overflow: hidden;
  height: 300px;
  width: 100%;
  border: 2px solid blue;
}
#container-inner {
  position:relative;
  top:50%;
  border: 2px solid red;
}
#container-inner img{
  width:100%;
  min-height:300px;
  max-height:600px;
  min-width: 400px;
  max-width:800px;
  margin: auto;
  position: absolute;
  border: 2px solid green;
  top: 0; left: 0; bottom: 0; right: 0;
}

This works on Chrome, IE, and Safari... but for some reason Firefox doesn't like it. I'm even fairly certain I had it working on FF a couple days ago but I've tested on two separate computers now and nothing.

Bonus points for uniformly cropping horizontally at small sizes through CSS as well.

and here is a fiddle: http://jsfiddle.net/Kd8bM/1/

UPDATED Fiddle: http://jsfiddle.net/Kd8bM/9/ (the code above now matches this.)

Second UPDATE: For clarification, on re-size this creates a zoom effect in chrome, safari, and ie. I'm trying to find a way to get that in Firefox.

Upvotes: 1

Views: 1486

Answers (2)

user2938649
user2938649

Reputation: 118

Giving the #container-inner a 100% width and height could do the trick.

#container-inner {
    position:relative;
    border: 2px solid red;
    width: 100%;
    height: 100%;
}

http://jsfiddle.net/Kd8bM/5/

UPDATE: After the thread of comments we resolved on this being an acceptable answer. http://jsfiddle.net/Kd8bM/10/

Upvotes: 1

Poornima
Poornima

Reputation: 928

I am not 100% sure I got your question, but I tried your fiddle in FF and Chrome to see the difference. I see the image is not aligned the same way in FF as it is in Chrome. You could try placing the image in outer DIV and not inside inner DIV. That would align the image properly in all browsers.

<div id="container-outer">
<div id="container-inner">
    </div>
    <img id="img" src="http://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png" />

</div>

#img{
 width:100%;
min-height:300px;
max-height:600px;
min-width: 400px;
max-width:800px;
margin:auto;
position: absolute;
border: 2px solid green;
left: 0;
top:-50%;
bottom: 0;
right: 0;
}

Upvotes: 1

Related Questions