javascript - 通过响应式设计使图像流畅？

Question

我实际上知道如何使用响应式设计来流动图像。但是，我的问题并不简单。我使用父级的缩放宽度函数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(){ ??? });

帮我修一下。谢谢你的帮助。

Answer 1

我会给图像一个特殊的类（如果不是全部都需要触发）。（在 resize 函数中使用一个计时器来支持浏览器多次触发它。）

$(window).resize(function(){

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

但另一方面，如果您只想缩放图像。在此示例中，该比率通过 padding-bottom 保持相同。

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