<!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>
私は画像を表示するために上記のコードを使用します。コードは2つの事実を除外してよく働いています：1）divの幅をイメージに合わせるにはどうしたらいいですか？私はwidth: auto;またはwidth: 100%;を試してみましたが、どちらもうまくいきませんでした...そして、2）なぜ非常に小さな空白部分が下部にあり、どうすればこの問題を解決できますか？HTML div width fit画像
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
は、それは、空白を修正
として@iamdevlinphで言った、それはあなたのイメージに合うことができるので、あなたのdivにdisplay: inline-block;を追加する必要があり、あなたのイメージにdisplay: blockを置くようにしてください。
<!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>1）どのようにすることができますdivの幅を画像に合わせる（画像が停止するところで止める）？
divの幅を調整してみてください 例：幅：15％;
または表示を追加できます：インラインブロック。 divの場合
2）なぜ非常に小さい空白部分が下部にあり、どうすればこの問題を解決できますか？ ディスプレイを追加：ブロック。画像
のために古いコードでこのコードを交換してください：
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>