レスポンシブコンテンツが伸びた

Question

私は、SoundCloudプレーヤーとボーダーをモバイルデバイスに対応させることに問題がありました。私は、高さと幅を自動にして、レスポンシブに固定しましたが、プレーヤーはボーダーに収まりません。デスクトップ上にあるときにも伸びます。

これは私がそれを反応的にするHTMLとCSSですが、ボーダーとプレーヤーは適合しません。

.frame_outer iframe{ 
 
    padding: 50px 49px; 
 
    background: url(http://www.dontcursekids.com/wp-content/uploads/2017/09/Border-1.png); 
 
    background-size: 100% 100%; 
 
}

<div class="frame_outer" style="padding: 18px; width: auto; height: auto; text-align: center;"><iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/280952276&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false" width="100%" height="220" frameborder="no" scrolling="no"></iframe></div>

私は私のCSSのthatsはそれを投げてその何かを想定しています。適切な方向の助けやガイドがあれば幸いです。デフォルトbox-sizing:content-box;のためのiframeの幅を軟化されるので、あなたは、IFRAMEにpadding: 50px 49px;とwidth:100%を追加するため

Answer 1

あなたがbox-sizing: border-box;を使用することができます。

そして、あなたはまた、パディングを調整する余裕負の値を使用することができます。

.frame_outer { 
 
    overflow: hidden; 
 
} 
 
.frame_outer iframe{ 
 
    padding: 50px 49px; 
 
    margin: -50px -49px; 
 
    background: url(http://www.dontcursekids.com/wp-content/uploads/2017/09/Border-1.png); 
 
    background-size: 100% 100%; 
 
}

<div class="frame_outer" style="padding: 18px; width: auto; height: auto; text-align: center;"><iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/280952276&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false" width="100%" height="220" frameborder="no" scrolling="no"></iframe></div>

Answer 2

これは私が思い付いたものですが、display:block;を使用し、私は、HTMLでのいくつかの変更を行いました。あなたが使ったイメージはすばらしいものではありませんでした。私はそれを切り取って余分なスペースを取り除きました。

.frame_outer { 
 
    padding: 50px 49px; 
 
    background: url(https://i.imgur.com/M57mh9s.png); 
 
    background-size: 100% 100%; 
 
    width: 100%; 
 
} 
 

 
iframe { 
 
    display: block; 
 
    width: 100%; 
 
}

<div class="frame_outer" style="padding: 18px; width: auto; height: auto; text-align: center;"> 
 
    <iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/280952276&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false" style="position: relative; height: 100%; width: 100%;" 
 
    frameborder="no" scrolling="no" allowtransparency="true"></iframe> 
 
</div>