html / css图像不会在调整浏览器大小时扩展父元素

Question

我主要是在寻找答案，无论这是预期的行为还是浏览器错误。

不敢相信我以前从未遇到过这个问题，我做错了什么吗？

http://jsbin.com/baroqudafayu/1/edit?output

尝试调整浏览器的大小，调整图像大小，parent（ .item ）保持相同宽度。 除非我手动触发重新绘制/重排。 请注意，它在负载下确实可以正常工作。

html / css没什么特别的。

 <div class="wrap">
    <div class="slide">
      <div class="item">
        <img src="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg" alt="">
      </div>
      <div class="item">
        <img src="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg" alt="">
     </div>
   </div>
</div>

--

html, body {
  height: 100%;
  background: green;
}

.wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 50000px;
  height: 100%;
  letter-spacing: 0;
}

.item {
  display: inline-block;
  height: 100%;

  img {
    display: block;
    height: 100%;
  }
}

我尝试将.item上的inline-block .item为block / float，以及更改几乎所有内容的组合显示，最大高度，最大宽度，高度，宽度。 没有任何帮助。

编辑：

附加信息

• 应该在IE8中工作
• 之所以存在.item ，是为了能够潜在地添加叠加层（位置绝对，宽度/高度为100％）并在悬停时显示。

Answer 1

您可以重新考虑CSS并使用空格规则将图像保持在1行上：

演示

演示全页

html, body, .wrap, .slide , .item, img {
  height:100%;
  margin:0;
  vertical-align:top;
  background:green;
}
.slide {
  white-space:nowrap;
}
.item {
  display:inline;  
  font-size:0.01px;/* kills somehow white-space in HTML code, reset it to childs if any text , like for alt attribute of image that could be usefull */
}

和这里： 内联块<li>版本