HTML div宽度适合图像

<!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宽度适合图像

来源

2017-06-02 darkchampionz

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

来源

2017-06-02 09:43:11 iamdevlinph

尝试把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>

来源

2017-06-02 09:42:51 jacman

1）如何我使div的宽度适合图像（停止图像停止）？

尝试调整DIV EG的宽度：宽度：15％;

或可以添加显示：内联块;对于DIV

2）为什么会出现在底部的非常小的空白区域，我该如何解决这一问题？添加显示：块;图像

来源

2017-06-02 10:00:16 sreedevi

请与旧的代码替换此代码：

img { 
 
    display: block; 
 
} 
 
div { 
 
    border: 1px solid black; 
 
    width: auto; 
 
    display: inline-block; 
 
}

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

来源

2017-06-02 12:06:05

HTML div宽度适合图像

回答

相关问题