Question

有人可以解释一下吗？图像高度在Chrome中无法正常呈现，但在其他所有浏览器中都可以正常显示...“RIDM”部分的第一个图像是该问题的一个很好的例子。

这是我的网站：http://www.maximebourgeois.com/

这可能与此Jquery命令有关：

$(window).on('load',function(){
$('section img').each(function(){
    if ($(this).width()/$(this).height() >= 1) {
        $(this).addClass('landscape');
    } else {
        $(this).addClass('portrait');
    }
});

Answer 1

这是因为你在图像上设置了max-height;他们停在550px。

而不是：

section img.portrait {max-height:550px; width:auto; height:100%;}

你可以尝试：

section img.portrait { width:100%; height:auto;}

因为高度百分比基于父元素大小工作，如果你想保持550px的最大高度，你应该让父元素550px高，所以：

section ul li{
    height: 550px;
}

section img.portrait{
    width: auto;
    height: 100%;
    max-height: 550px;
}

Chrome中的图像高度错误

1 个答案: