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

Question

Primarily I'm looking for answer whether this is intended behaviour or a browser bug..

Can't believe I have never encountered this problem before, am I doing something obviously wrong?

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

Try resizing the browser, images resizes, parent( .item ) stays same width. Unless I manually trigger repaint/reflow. Note that it does work fine on load.

The html/css is nothing special.

 <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%;
  }
}

I've tried changing inline-block on .item to block/float, as well as changing combinations display, max-height, max-width, height, width on pretty much everything. Nothing helped.

edit:

additional info

• should work in IE8
• the reason .item is there, is to be able to potentially add overlay(with position absolute, widht/height 100%) and show it on hover.

Answer 1

You could rethink your CSS and use the white-space rule to keep your image on 1 line:

DEMO ,

DEMO FULL PAGE

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 */
}

and here : the inline-block <li> version