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,174
  • 5
  • 24
  • 47

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
  • 191
  • 9
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,592
  • 2
  • 22
  • 45
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
  • 435
  • 6
  • 26