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:
.item
is there, is to be able to potentially add overlay(with position absolute, widht/height 100%) and show it on hover. You could rethink your CSS and use the white-space rule to keep your image on 1 line:
DEMO ,
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.