Question

这是我的第一个问题，我已经找到了答案，但看不到任何有用的东西，我已经尝试了很多东西。

我们有一个庞大的网站，分为主页上的几个部分。导致问题的部分是两个div，每个占据1100px的45.5％。其中每一个都有两个div，每个div占45.5％。我们使用JSON对象从网站的其他部分提取信息，以显示最新的2篇新闻文章和2篇最新评论。该对象正在使用我已经设置的所有样式。

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

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 .. */
}

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

1 个答案: