尺寸Div与其中的图像一样大

Question

我正在努力使我的div与其中的图像一样大。但是，它不起作用。当我谷歌它，我找到适合图像大小的结果。我想要反过来。

这是我的代码：

.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>

这是一张div现在有多大的图片：

Answer 1

<div>默认情况下为display: block ，这意味着它将占用其父级的整个100％宽度，这将扩展到您的案例中整个页面的宽度。如果您需要根据其中的内容流动div宽度，则需要将其更改为display:inline-block

.backgroundimage {
  display:inline-block
}

希望这会有所帮助。

Answer 2

这里的问题是you：youtube-iframe的绝对值。

.backgroundimage {
    display:inline-block;
    position: relative;
    top: 70px;
    bottom: 46px;
    width: 505px;
    height: 329px;
}
.Youtube {
    position: absolute;
    top: 20px;
    left: 20px;
}

我只是在这里放了一个codepen：http://codepen.io/mtness/pen/kkvoaQ

最好将youtube-iframe整齐地放入backgroundImage-div中，并通过边距或其他方式定位。