<!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)为什么底部有一个非常小的空白区域,我该如何解决这个问题?
答案 0 :(得分:1)
尝试将display: block
添加到您的图片中,它应该修复空白区域
正如@iamdevlinph所说,将display: inline-block;
添加到您的div中,以便它可以适合您的图像。
<!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;
答案 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
}
答案 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;
}