<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 1px solid black;
    width: auto;
}
</style>
</head>
<body>

<div>
<img src = "http://www.flowerpicturegallery.com/d/1977-3/yellow+daisy+flower+picture.jpg">
</div>

</body>
</html>


我使用上面的代码显示图像。代码可以很好地说明两个事实:1)如何使div的宽度适合图像(在图像停止处停止)?我尝试了width: auto;width: 100%;但它们都不起作用... 2)为什么底部有一个很小的空白区域,我该如何解决?

最佳答案

的HTML

<div class="child-width">
    <img src = "http://www.flowerpicturegallery.com/d/1977-3/yellow+daisy+flower+picture.jpg">
</div>


的CSS

.child-width {
    border: 1px solid black;
    display: inline-block; // add this
}


选中此example fiddle

关于html - HTML div宽度适合图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44325691/

10-14 12:27
查看更多