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>版本