為什么Firefox和Chrome會以不同的方式顯示此圖像？

Question

我的圖片在Chrome和Firefox中的顯示方式有所不同。

這是一個小提琴http://jsfiddle.net/SEOplay/4FGad/2/用firefox和chrome打開它，您將看到圖像尺寸不同。

Chrome會根據需要顯示圖像。

HTML

    <div id="imageContent">
        <div id="bigImgCon">    
<a href="<?php echo $firstImg; ?>" rel="lightbox"><img id="firstImage" rel="lightbox" src="http://placekitten.com/200/400" /></a>

        </div>
    </div>

CSS

div#imageContent {
    width:100%;
    text-align:center;
    margin:0 auto;
}
div#bigImgCon {
    width:100%;
    max-height:300px;
    overflow:hidden;
    position:relative;
    margin-top:10px;
    background-color:red;
}
img#firstImage {
    max-width:100%;
    max-height:100%;
    cursor:hand;
    cursor:pointer;
    display:inline-block;
}

Answer 1

在firefox中，我將max-height更改為height，它的工作原理與Chrome相同...第一個將height設置為300px的人就是這么做的。

更新...取消div＃bgImgCon的最大高度，然后將其放到div＃imageContent類上。 在我看來，這將為您解決問題。

div#bigImgCon {
    width:100%;
    overflow:hidden;
    position:relative;
    margin-top:10px;
    background-color:red;
}
img#firstImage {
    max-width:100%;
    max-height:300px;
    cursor:hand;
    cursor:pointer;
    display:inline-block;
}