Thomas Hutton Thomas Hutton - 1 month ago 13
CSS Question

Size Div to be as Large as the Image Within It

I'm trying to make my div as big as the image within it. However, it doesn't work. And when I Google it I find results for fitting the image size to the div. I want the other way around.

Here's my code:



.backgroundimage {
position: relative;
top: 70px;
bottom: 46px;
}
.Youtube {
position: absolute;
left: 280px;
bottom: 46px;
}

<div class="backgroundimage">
<img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
<iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
</div>





Here's a picture of how large the div is right now:

enter image description here

Answer

A <div> is by default display: block, which means it will take the entire 100% width of its parent which will extend to the entire page's width in your case. If you need your div width to flow according to the contents inside it, you need to change it to display:inline-block

.backgroundimage {
  display:inline-block
}

Hope this helped.

Comments