Question

我遇到了将SoundCloud播放器和边框响应移动设备的问题。我把高度和宽度设置为自动并固定响应，但不是玩家不适合边框。它在桌面上也会延伸。

这是我所拥有的HTML和CSS，使其具有响应性，但边框和播放器不适合。

＆＃13;

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

＆＃13;

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

＆＃13;

我假设我的Css有什么东西可以把它扔掉。任何有关正确方向的帮助或指南都将不胜感激。

Answer 1

您可以使用box-sizing: border-box;，因为您将padding: 50px 49px;和width:100%添加到iframe，因此对于默认box-sizing:content-box;，iframe的宽度将会被柔化。< / p>

您还可以使用边距负值来调整填充：

.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中做了一些更改。您使用的图像不是很好的imo，我裁剪它以便移除外部额外空间。

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

响应内容延伸

2 个答案: