CODEWITHSUNDEEP
csssafariheightcss-positionabsolute
impleri
impleri

Reputation: 71

Image height within absolute div?

Safari for Windows is not calculating img height correctly within absolutely positioned div. The styling works fine on Chrome and Firefox.

http://jsfiddle.net/Wh2Tr/

HTML:

<div class="image">
  <div class="image-inner">
    <img src="http://lorempixel.com/400/200" />
  </div>
</div>

CSS:

.image {
    position: relative;
    max-width: 100%;
    height: 0;
    padding-bottom: 75%;
}

.image-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.image img {
    width: auto;
    max-height: 100%;
    margin: 0 auto;
    display: block;
}

Caveats:

  1. This is a simplification of the HTML. There are multiple images of varying sizes which need to have the same height (so using width:100%;height:auto; won't work)
  2. This needs to be adaptive/responsive, so I can't set an explicit width or height to the image or container.

Upvotes: 4

Views: 10791

Answers (2)

Gigi Ionel
Gigi Ionel

Reputation: 248

Same problem, I've used jquery. I couldn't find any solution till now:

$('.image-inner').css('height','100%').height($('.image-inner').height());

Upvotes: 1

dowomenfart
dowomenfart

Reputation: 2803

On the class image put height to auto. That should fix it. http://jsfiddle.net/Wh2Tr/1/

.image {
    position: relative;
    max-width: 100%;
    height: auto;
    padding-bottom: 75%;
}

Upvotes: 0

Related Questions