css - 火狐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

尝试这个

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

CSS

    .imgcontainer{
    witdh:80%;
    margin:0 10%;
    background-image:url(' background: url(prova.jpg') no-repeat center center fixed;
    -webkit-background-size: cover; /*for webKit*/
    -moz-background-size: cover; /*Mozilla*/
    -o-background-size: cover; /*opera*/
    background-size: cover; /*generic*/

    }

Answer 2

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

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

Answer 3

您可以将图像高度以像素为单位吗：-

#productPhoto img{
   height:100px;
}

或者，如果您想以百分比给出，安迪建议也将起作用。

或者，您可以为 Exe 指定以像素为单位的父高度：-

#productPhoto{
    float: left;
    width: 50%;
    height: 200px;
    text-align: center;
}
#productPhoto img{
  height:50%;

}