2017-09-20 19 views
2

휴대 기기에서 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는 그게 전부가를 던지는와의 뭔가를 믿고있어. 올바른 방향으로 어떤 도움이나 가이드라도 크게 감사 할 것입니다. 기본 box-sizing:content-box;의 iframe 대응의 폭이 부드럽게됩니다 있도록, iframe을에 padding: 50px 49px;width:100%를 추가하기 때문에

답변

0

당신은 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>

+0

전체 페이지 iframe이이 새로운 요구 사항을 충족 할 수있는 테두리 이미지 – Hash

+0

의 외출? – JiangangXiong

+0

내 질문이 아니라, 내가 무엇을 볼 수 있는지 알려주는 것. – Hash

0

이 내가 생각 해낸 것입니다, 나는 또한 HTML에서 몇 가지 변경을 한 display:block;을 사용했다. 당신이 사용했던 이미지는 위대한 것이 아니 었습니다. 나는 그것을 자른 것이므로 여분의 여분의 공간이 제거되었습니다.

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

+0

감사합니다. 여분의 외부 공간은 낙서 디자인이 손으로 그려진 것처럼 보이지 않게 잘라내 었는지 확인하는 것이 었습니다. 그 외에는 display : 블록을 추가합니다. 공장! 화면 내부에 들어 가지 않고 화면을 채우는 것만이 아닙니다. 디스플레이의 너비를 바꿀까요? : 블록; 고쳐? –