0
<!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>

I use the above code to display an image. Code works good excepct two facts: 1) How can I make the div's width fit the image (stop where image stops)? I tried width: auto; or width: 100%; but none of them works... And 2) why is there a very small blank area at the bottom and how can I fix this?

darkchampionz
  • 1,014
  • 2
  • 18
  • 41

4 Answers4

1

Try to put display: block to your image, it should fix the blank space,

And as said by @iamdevlinph, add display: inline-block; to your div so it can fit your image.

<!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>
jacman
  • 181
  • 8
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
}

Check this example fiddle

Dev
  • 1,407
  • 1
  • 20
  • 41
1

1) How can I make the div's width fit the image (stop where image stops)?

Try with adjusting width of div Eg: width: 15%;

or you can add display: inline-block; for div

2) why is there a very small blank area at the bottom and how can I fix this? Add display: block; for image

Anu Sree
  • 59
  • 3
  • 10
0

Please replace this code with your old code: 

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>
Hardik Chapla
  • 436
  • 5
  • 26