用響應式設計製作圖像流體？

我實際上知道如何使用響應式設計來使圖像變得流暢。但是，我的問題並不簡單。我用父母div的規模寬度功能追加的image這樣的寬度：用響應式設計製作圖像流體？

function OnImageLoad(evt){somthing....} 
<div class="parent"> 
<img style="left: 0px; top: -20px;" onload="OnImageLoad(event);" src="http://4.bp.blogspot.com/-pHWQ1Wp63GQ/Uk3TJLa9FbI/AAAAAAAAACg/_JUXOxweYY8/s1600/edu2.jpg" width="270" height="175"> 
</div>

現在，我想運行再次像onload="OnImageLoad(envent);"事件，如果窗口大小調整

$(window).resize(function(){ ??? });

幫我解決它。謝謝你的幫助。

來源

2013-10-09 Minh Anh

而不是使用JavaScript來獲得流動性，爲什麼不能設置圖像的高度和寬度的百分比？ –

由於圖像是從帖子加載以製作縮略圖。爲了保證縮略圖質量，我必須使用縮放函數從父div生成圖像的大小。 –

你可以使用window.onresize並遍歷圖像集合 –

我會給圖像一個特殊的類（如果不是全部都需要觸發）。（使用一個定時器在調整大小功能，從多次觸發它支持的瀏覽器。）

$(window).resize(function(){ 

     //get the function out of the onload attribute 
     var onloadFunction = $("img.[specialclass]").attr("onload"); 
     //Execute it 
     eval(onloadFunction); 
});

但在另一方面，如果你只是想縮放圖像。在此示例中，該比率通過填充底部保持不變。

img{ 
    width:100%; 
    height:0; 
    padding-bottom:66%; 
}

來源

2013-10-09 12:26:32 NLAnaconda

實際，它沒有工作。但是，感謝您的幫助。 –

更新了..試試這個:) – NLAnaconda

我試過了，但它仍然是一樣的結果。感謝您的幫助。 –

用響應式設計製作圖像流體？

回答

相關問題