HTML div宽度适合图像

时间:2017-06-02 09:40:48

标签: html css image

<!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)为什么底部有一个非常小的空白区域,我该如何解决这个问题?

4 个答案:

答案 0 :(得分:1)

尝试将display: block添加到您的图片中,它应该修复空白区域

正如@iamdevlinph所说,将display: inline-block;添加到您的div中,以便它可以适合您的图像。

&#13;
&#13;
<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 1px solid black;
    width: auto;
    display: inline-block;
}
img {
  display: block;
}
</style>
</head>
<body>

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

</body>
</html>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

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

答案 2 :(得分:1)

1)如何使div的宽度适合图像(停止图像停止的位置)?

尝试调整div的宽度    例如:宽度:15%;

或者你可以添加display:inline-block;为div

2)为什么底部有一个非常小的空白区域,我该如何解决这个问题呢?  添加显示:块;对于图像

答案 3 :(得分:0)

请用旧代码替换此代码:

----------------------------------
|id | follower_id | following_id |
----------------------------------
|1  |   101       | 105          |
|2  |   105       | 102          |
|3  |   105       | 101          |
|4  |   105       | 103          |
----------------------------------
img {
  display: block;
}
div {
    border: 1px solid black;
    width: auto;
    display: inline-block;
}