响应图像的懒惰和同位素

时间:2014-04-07 12:21:16

标签: jquery image responsive-design jquery-isotope jquery-lazyload

如何使图像响应懒惰加上同位素jquery插件?到目前为止,我有以下代码:

<div class="thumbnail item">
    <a href="image.jpg" class="fbgroup" rel="fbgroup">
        <img class="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="thumb_image.jpg" height="auto" width="auto" style="height:300px; width:450px;" />
        <noscript><img src="image.jpg" height="auto" width="auto" style="width:450px; height:300px" /></noscript>
    </a>
</div>

Lazyload的工作方式与此类似,同位素中的砌体也是如此,但是当我将浏览器调整为比图像宽度更薄的东西时,它会突破页面内容容器,并且不会响应缩小。令人困难的是lazyload似乎想要img标签的样式部分中图像的真实宽度和高度。

0 个答案:

没有答案