图像在Firefox上的表现不同

Question

我有两个响应式图像，随着浏览器窗口缩小而缩小尺寸 这些图像在Chrome和Edge上运行良好，但对于Firefox，其中一个图像表现不同，它会停止缩小。
任何人都可以帮我解决这个问题吗？您可以在移动视图中查看问题 提前致谢。

这是我的代码：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我的代码 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>