使iframe響應當我嘗試實現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%;}
3 回答
滄海一幻覺
TA貢獻1824條經驗 獲得超5個贊
我找到了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%;}- 3 回答
- 0 關注
- 666 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消