Адаптивный контент растянут

У меня возникла проблема с включением проигрывателя SoundCloud и адаптацией границ для мобильных устройств. Я поставил высоту и ширину на авто и исправил отзывчивость, но не плеер не вписывается в границу. Он также растягивается, когда на рабочем столе.

This is the HTML and CSS I have that makes it responsive, but the border and player don't fit. 

.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, которое его отбрасывает. Будем очень признательны за любую помощь или руководство в правильном направлении.


html css responsive distortion
person Bryan Howard    schedule 20.09.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Это то, что я придумал, используя 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>

person Hash    schedule 20.09.2017
comment
Спасибо. Дополнительное внешнее пространство было сделано для того, чтобы дизайн каракулей выглядел так, как будто он нарисован от руки, а не обрезан. Помимо этого, добавление display:block; работает! Единственное, что не так, это то, что он заполняет экран, а не помещается внутри него. Изменится ли ширина экрана display:block; исправить это? - person Bryan Howard; 21.09.2017

arrow_upward
0
arrow_downward

Вы можете использовать box-sizing: border-box;, потому что вы добавляете padding: 50px 49px; и width:100% в iframe, поэтому для box-sizing:content-box; по умолчанию ширина iframe будет смягчена.

И вы также можете использовать отрицательные значения поля для настройки заполнения:

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

person JiangangXiong    schedule 20.09.2017
comment
iframe на всю страницу выходит за границы изображения - person Hash; 20.09.2017
comment
Может ли это новое удовлетворить ваши потребности? - person JiangangXiong; 20.09.2017
comment
не мой вопрос, просто дам вам знать, что я вижу :) - person Hash; 20.09.2017
comment
Благодарю за ваш ответ. как сказал другой пользователь, iframe выходит за границу. Это идет дальше, чем раньше, что заставляет меня поверить, что изменение отступов и полей может быть эффективным решением. спасибо за помощь еще раз. - person Bryan Howard; 21.09.2017