이미지가 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>