Mozilla 未在预定义的 div 中调整图像大小

Question

这是我的第一个问题，我一直在寻找答案，但看不到任何有效的方法，而且我已经尝试了很多方法。

我们有一个巨大的网站，在主页上分为几个部分。导致问题的部分有两个 div，每个 1100px 的 45.5%。在这些中的每一个中还有两个 div，每个又占一半的 45.5%。我们使用 JSON 对象从站点的另一个部分提取信息，以显示最新的 2 篇新闻文章和 2 条最新评论。该对象正在使用我已经设置的所有样式。

部分 JSON 是从新闻和评论中提取的图像。我使用了以下 CSS 来确保图像的最大高度为 160 像素。所有浏览器都运行良好，但 Mozilla 没有缩放图像以适应最大宽度并且存在巨大溢出。图像是设置的高度，但它会将宽度缩放到该高度，而不是最大宽度 200 像素。

CSS 是：

.review-img {
height: 160px;
width: 200px
display: table-cell;
vertical-align: middle;
}
.review-img img {
max-height: 100%; 
max-width: 100%;
}
.news-img {
height: 160px;
width: 200px;
display: table-cell;
vertical-align: middle;
} 
.news-img img {
max-height: 100%;
max-width: 100%;
 }

新闻的 JSON 是：

    var json_obj = $.parseJSON(headline);//parse JSON
        console.log(json_obj);

        var output = '';

            output+="<div class='one-half'>";
            output+="<div class='news-img'><img alt='' src='http://dealer.mustek.co.za/" + json_obj[0].image +"'/></div>";
            output+="<p><a href='http://dealer.mustek.co.za/view-article.html?p="+ json_obj[0].page_id +"'>" + json_obj[0].article_title + "</a><br>" + json_obj[0].article + "</p>";
            output+="<a href='http://dealer.mustek.co.za/view-article.html?p="+ json_obj[0].page_id +"'>Read more</a>";
             output+="</div>";
             output+="<div class='one-half'>";
            output+="<div class='news-img'><img alt='' src='http://dealer.mustek.co.za/" + json_obj[1].image +"'/></div>";
            output+="<p><a href='http://dealer.mustek.co.za/view-article.html?p="+ json_obj[1].page_id +"'>" + json_obj[1].article_title + "</a><br>" + json_obj[1].article + "</p>";
            output+="<a href='http://dealer.mustek.co.za/view-article.html?p="+ json_obj[1].page_id +"'>Read more</a>";
             output+="</div>";



        $('#newsfeed').html(output);

评论完全一样。

HTML 是：

<section class="one-half-feeds">
   <div class="title">
   <h2>Industry News</h2>
   </div>
   <div id="newsfeed"></div>
</section>
<section class="one-half-feeds">
    <div class="title">
   <h2>Tech Reviews</h2>
    </div>
<div id="reviewfeed"></div>
 </section>

我一生都无法弄清楚为什么所有其他浏览器都没有问题，但 Mozilla 就是无法工作......

Answer 1

将display:inline-block 或display:block 添加到图像样式。

.review-img img {
    display:inline-block;
    /* etc .. */
}