如何調整HTML5的圖像移動

我事先不搞清楚如何格式化這個正確如何調整HTML5的圖像移動

我轉換包含按鈕和非常簡單的動作腳本爲HTML5文件的Flash SWF道歉。我上傳的.html和使用iframe代碼我在網上找到把它在我的wordpress網站：

<div id="iframewrap"><iframe id="iframeid" name="iframeName" src="test.html" 
height="578" width="110%" frameborder="0" marginwidth="0" marginheight="0" 
scrolling="yes"></iframe></div> 

<style type="text/css"><!--#iframewrap { width: 110%; padding: 0px; 
top:-25px; position:relative; overflow:hidden;} #iframeid { width:110%; 
height:578px; margin:10px 10px 10px 10px; overflow:hidden;} #iframeid 
{ -ms-zoom: 0.9; -moz-transform: scale(0.9); -moz-transform-origin: 0 0; 
-o-transform: scale(0.9); -o-transform-origin: 0 0; -webkit-transform: 
scale(0.9); -webkit- transform-origin: 0 0; 
} --><style>--></style>

它看起來在網站上不錯，但就是這樣過大的移動版本。如果我調整任何比例（將.9更改爲.25），它也會影響原始網站。有沒有辦法讓我的原始網站保持在.9並讓移動設備將其改爲.25？

來源

2013-10-08 Mariowned

目前仍然爲響應I幀沒有很好的解決方案。我很好奇，因爲你要爲你的標題尋找什麼是一個「響應圖像」，爲什麼你使用iframe而不是簡單的'img'標籤？ –

我將swf轉換爲html5文件，無法使用img標籤來處理它。 iframe結束了工作，所以我只需要將其擴展。 – Mariowned

@ChrisFerdinandi有沒有一種方法可以使用img標籤來加載這個html5圖片？我用swiffy轉換了swf。 – Mariowned

也許media query是你在找什麼：

@media screen and (max-width : 500px) { 
    #iframeid { 
    -ms-zoom: 0.25; 
    -moz-transform: scale(0.25); 
    -o-transform: scale(0.25); 
    -webkit-transform:scale(0.25); 
    } 
}

來源

2013-10-08 19:51:31

我試過你的建議，它使iframe在移動設備上根本無法加載，並且仍然可以在計算機上正常加載。 – Mariowned

如何調整HTML5的圖像移動

回答

相關問題