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

我会给图像一个特殊的类（如果不是全部都需要触发）。（在调整大小功能中使用计时器以支持浏览器多次触发它。）

$(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%;
}

使图像流畅，具有响应式设计？

1 个答案: