Chrome element.style切断图像

Question

正如您在图片中所注意到的，Chrome正在将所选div的高度调整为55px。这是element.style，我认为是由脚本计算并插入到html中。 55px是不正确的，因为它正在切断图像，所以我想使它成为305px。奇怪的是，这只发生在Chrome中，适用于IE和Firefox。另外，当我在计算机上的Chrome本地处理html页面时，它不会发生。我尝试使用！important来覆盖55px CSS规则，但这并没有做任何事情。我清除了浏览器缓存/ cookie并重新上传了文件，但没有。当您使浏览器窗口变小然后再次全屏时，Chrome似乎可以自行更正并且显示正确。任何帮助表示赞赏。

Answer 1

在 /js/main.js 文件中

更改此代码：

$container.isotope({
    itemSelector: '.isotopeItem',
    resizable: false, // disable normal resizing
    masonry: {
        columnWidth: $container.width() / $resize
    }
});

要：

$container.imagesLoaded( function() {
    $container.isotope({
        itemSelector: '.isotopeItem',
        resizable: false, // disable normal resizing
        masonry: {
            columnWidth: $container.width() / $resize
        }
    });
});

这有望使同位素等待图像加载。

编辑：最新版本的同位素不再包含Imagesloaded。你有一个包含Imagesload的旧版本，但是如果要升级到更新的版本，你将不得不使用这个版本：http://imagesloaded.desandro.com/