图像在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>