css - Firefox CSS 图像

Question

我在使用 Firefox img 显示时遇到了问题。我的页面包含产品说明:

<article id="productPhoto">
    <img id="prodImg" src="prova.jpg" />
</article>
<article id="productDesc">
    <h3 id="prodName"></h3>
    <h3 id="prodDesc"></h3>
</article>

CSS 是这样的:

#productPhoto{
    float: left;
    width: 50%;
    height: 81%;
    text-align: center;
}
#productPhoto img{
    height: 80%;
}
#productDesc{
    float: right;
    width: 50%;
}
#prodName{
    font-size: xx-large;
    padding: 10px;
}

现在，img prova.jpg 非常大(宽度:2676px，高度:2068px)。在 Chrome 中，img 被调整为 #productPhoto 的 80%，但 firefox 没有，所以如果我在 firefox 中看到我的页面，img 是巨大的!!! :(一些建议？

谢谢，卢卡

Answer 1

尝试为您的图像设置最大值:

#productPhoto img{
    max-height: 80%;
    max-width: 100%;
}