“iFrame을 반응 형으로 만들 수 있습니까?”라는 제목 의이 stackoverflow 게시물 을 읽었 으며 댓글 / 응답 중 하나 가이 jfiddle로 연결되었습니다.
그러나 필자의 요구에 맞게 HTML과 CSS를 구현하려고 할 때 동일한 결과 / 성공을 얻지 못했습니다. 내 JS 바이올린을 만들었 으므로 어떻게 작동하지 않는지 보여줄 수 있습니다. 필자가 사용중인 iFrame 유형과 관련이 있다고 확신합니다 (예 : 제품 이미지도 반응이 있거나 무언가 필요할 수 있습니까?)
내 주요 관심사는 내 블로그 독자가 iPhone에서 내 블로그를 방문 할 때 모든 내용이 x 너비 (모든 내용의 100 %)에 있기를 원하지 않으며 iFrame이 오작동하고 유일한 요소라는 것입니다. 다른 모든 내용을 지나치십시오.
어쨌든, 왜 작동하지 않는지 아는 사람이 있습니까? 감사합니다.
다음은 MY JSFIDDLE의 HTML 및 CSS입니다 (링크를 클릭하지 않으려는 경우).
<div class="wrapper">
<div class="h_iframe">
<!-- a transparent image is preferable -->
<img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
<iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585'
frameborder="0" allowfullscreen></iframe>
</div>
</div>
다음은 동반 CSS입니다.
.wrapper {
width: 100%;
height: 100%;
margin: 0 auto;
background: #ffffff;
}
.h_iframe {
position: relative;
}
.h_iframe .ratio {
display: block;
width: 100%;
height: auto;
}
.h_iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
답변
나는 당신에게 Incredible Singing Cat 솔루션을 제시합니다 =)
.wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
jsFiddle : http://jsfiddle.net/omarjuvera/8zkunqxy/2/
윈도우 바를 움직이면 iframe이 반응 적으로 크기 조정됩니다
또는 고유 비율 기법을 사용할 수도 있습니다.
이는 위의 동일한 솔루션 (토마토, 토마토)의 대체 옵션입니다.
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
border: 0;
width: 100%;
height: 100%;
}
답변
이 코드를 사용하여 반응 형으로 만들어보십시오
iframe, object, embed {
max-width: 100%;
}
답변
Dave Rupert / Chris Coyier에서 해결책을 찾았습니다. 그러나 스크롤을 사용할 수 있도록 만들고 싶었습니다.
// HTML
<div class="myIframe">
<iframe> </iframe>
</div>
// CSS
.myIframe {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto;
-webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY
border: solid black 1px;
}
.myIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
답변
이 사이트 http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php 에 언급 된이 트릭을 사용할 수 있습니다 .
매우 유용하고 이해하기 쉽습니다. 당신이 만드는 모든 것
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
다음은 데모를 위해 편집 한 js 바이올린 입니다.
답변
이 솔루션을 확인하십시오 … 저에게 효과적입니다 >> https://jsfiddle.net/y49jpdns/
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
html body {width: 100%;height: 100%;padding: 0px;margin: 0px;overflow: hidden;font-family: arial;font-size: 10px;color: #6e6e6e;background-color: #000;} #preview-frame {width: 100%;background-color: #fff;}</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var calcHeight = function() {
$('#preview-frame').height($(window).height());
}
$(document).ready(function() {
calcHeight();
});
$(window).resize(function() {
calcHeight();
}).load(function() {
calcHeight();
});
</script>
</head>
<body>
<iframe id="preview-frame" src="http://leowebguy.com/" name="preview-frame" frameborder="0" noresize="noresize">
</iframe>
</body>
</html>
답변
iframe{
max-width: 100% !important;
}
답변
DA가 옳다. 당신의 바이올린에서, iframe은 실제로 반응합니다. iframe 상자 크기를 확인하여 방화범에서이를 확인할 수 있습니다. 그러나 iframe 내부의 일부 요소는 반응이 없으므로 창 크기가 작을 때 “고착”됩니다. 예를 들어 div#products-post-wrapper의 너비는 8800 픽셀입니다.
