Question

我正在尝试将div设置为与包含高度的图像相同的宽度：100％和宽度：自动。

使用display：inline-block它似乎可以工作，但前提是你没有调整浏览器的大小。 div slide始终保持初始宽度。我该如何改变这种行为？

这是我的代码：

CSS：

html{
    width: 100%;
    height: 100%;
}
body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.gallery{
    height: 80%;
    width: 100%;
}
.slide{
    background-color: #000;
    height: 100%;
    width: auto;
    display: inline-block;
    margin: 0;
    padding: 0;
}

img{
    width: auto;
    height: 100%;
    float: left;
    opacity: 0.5;
}

HTML：

<body>
<div class="gallery">
    <div class="slide">
        <img src="http://lorempixel.com/300/200/nature/1">
    </div>
</div>

</body>

或在这里： https://jsfiddle.net/ykzokoxd/

Answer 1

修复：

.element{
 -webkit-animation: ibfix infinite 1s;
}

@-webkit-keyframes ibfix { 
 from {max-width:100%;padding:0;} 
 to {max-width:99.9%;padding:0.01%} 
}

编辑：“重新绘制/刷新内联块元素，因此宽度适应子img”

https://jsfiddle.net/ykzokoxd/2/

内联块元素不适应宽度为的图像：auto

1 个答案: