圖像在Firefox上的行爲不同

Question

我有兩個響應式圖像，隨着瀏覽器窗口縮小而縮小。
這些圖像在Chrome和Edge上運行良好，但對於Firefox，其中一個圖像行爲不同，它不會收縮。
任何人都可以幫我解決這個問題嗎？您可以在移動視圖中看到問題。
在此先感謝。

這是我的代碼：

.row-images { 
 
    display: flex; 
 
} 
 

 
.main-image { 
 
    float: left; 
 
} 
 

 
img { 
 
    border: 0; 
 
    vertical-align: top; 
 
    max-width: 100%; 
 
} 
 

 
.side-image { 
 
    float: left; 
 
    margin-top: 2em; 
 
    margin-left: 4%; 
 
}

<div class="row-images"> 
 
    <div class="main-image"><img src="http://icabinets.joomji.com/skin/frontend/ultimo/child/images/row10.png"></div> 
 
    <div class="side-image"><img src="http://icabinets.joomji.com/skin/frontend/ultimo/child/images/row10_side.png"></div> 
 
</div>

我有我的代碼here

Answer 1

試試這個代碼

.row-images { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: flex-start; 
 
    align-items: flex-end; 
 
} 
 
.side-image{ 
 
    margin-left:4%; 
 
} 
 
img {max-width:100%;}

<div class="row-images"> 
 
    <div class="main-image"> 
 
     <img src="http://icabinets.joomji.com/skin/frontend/ultimo/child/images/row10.png"> 
 
    </div> 
 
    <div class="side-image"> 
 
    <img src="http://icabinets.joomji.com/skin/frontend/ultimo/child/images/row10_side.png"> 
 
    </div> 
 
    </div>