미리 정의 된 div 내에서 이미지의 크기가 조절되지 않습니다.

Question

이것은 내 첫 번째 질문이며 답변을 찾았지만 제대로 작동하는 것을 볼 수 없으며 여러 가지를 이미 시도했습니다.

우리는 거대한 사이트를 홈 페이지의 몇 섹션으로 나눕니다. 두 개의 div를 발행하는 섹션은 각각 1100px의 45.5 %입니다. 이들 각각에는 두 개의 div가 있으며, 각각 다시 절반의 45.5 %가됩니다. 우리는 JSON 객체를 사용하여 사이트의 다른 섹션에서 정보를 가져와 최신 2 개의 뉴스 기사와 2 개의 최신 리뷰를 표시합니다. 개체는 내가 이미 설정 한 모든 스타일을 사용하고 있습니다.

JSON의 일부는 뉴스와 리뷰에서 가져온 이미지입니다. 다음 CSS를 사용하여 이미지의 높이가 최대 160 픽셀인지 확인했습니다. 모든 브라우저가 정상적으로 작동하지만 Mozilla는 최대 너비에 맞게 이미지 크기를 조절하지 않으며 엄청난 오버플로가 있습니다. 이미지는 설정된 높이이지만 너비를 200px의 최대 너비가 아니라 그 너비로 조정합니다.

.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은 다음과 같습니다 :

CSS의는

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> 

다른 모든 브라우저는 전혀 문제가 발생하지 않는 이유는 내 인생에 대한 알아낼 수는 없지만, 모질라 그냥 작동하지 않습니다 ...

Answer 1

이미지 스타일에 display:inline-block 또는 display:block을 추가하십시오.

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