绝对div内的图像高度?

时间:2013-11-07 18:12:17

标签: css safari height css-position absolute

Safari for Windows无法在绝对定位的div中正确计算img高度。样式在Chrome和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;
}

注意事项:

  1. 这是HTML的简化。有多个不同大小的图像需要具有相同的高度(因此使用宽度:100%;高度:自动;不起作用)
  2. 这需要具有自适应性/响应性,因此我无法为图像或容器设置明确的宽度或高度。

2 个答案:

答案 0 :(得分:1)

同样的问题,我用过jquery。到目前为止我找不到任何解决方案:

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

答案 1 :(得分:0)

在班级图像上将高度设置为自动。那应该解决它。 http://jsfiddle.net/Wh2Tr/1/

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