サイズDivはそれの中のイメージと同じくらい大きいです

Question

私はそれの中のイメージとして私のdivを大きくしようとしています。ただし、動作しません。そして私がGoogleにそれを当てたら、画像サイズを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

ここでの問題は、youtube-iframeのpos：absoluteです。

.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

backgroundImageの-のdivにきちんとユーチューブ-のiframeに合わせ、これはマージンを介して、または他の配置持って私見方が良いだろう。