写
<img style="width:100%">
是可以保持宽高比自适应显示的。
但问题在于在图片开始加载之前，无法知道图片占的高度，这不仅会在浏览器获取到图片宽度后引起页面的布局发生变化，还会导致和lazyload插件本身的使用问题：

lazyload是通过计算图片的位置，看它是否出现在视窗中，来判断是否应该开始加载某个图片的，
假设这个<img>下面还有一些需要lazyload的其他图片，

那么在其他图片上面，如果发生高度变化（由于上述<img>被加载了挤下来了），通常lazyload并不能检测到这个变化（默认情况下lazyload通过window的scroll事件和window的resize事件触发检测），则会导致判断图片位置出现错误
也就是说，图片上面（包括左边）的所有元素都要有确定的高度
而采用padding-top,bottom结合背景图的形式，可以在图片尚未加载时，就有高度占位。

@dongfanhua

谢谢你的回答

@jieyou 如果提供的 img 标签内容如下：

<img data-original="..." data-size="550, 360" alt="" title="" >

data-size 里面放置的是图片的真实宽高，然后到了前端后再利用 js 计算该 img 相应的宽高，最后再执行 lazyload 方法，这样可以吗？