html - 响应内容拉伸(stretch)

Question

我在为移动设备设置 SoundCloud 播放器和边框响应时遇到了问题。我将高度和宽度设置为自动并修复了响应，但不是播放器不适合边框。在桌面上时它也会拉伸(stretch)。

这是我拥有的 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 有关系，这会导致它失败。任何正确方向的帮助或指导将不胜感激。

Answer 1

这是我想出的，使用了 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>