CSS Firefox问题：在调整大小时，保持Flexbox内部不同宽度的并排div的相对大小

Question

我使用Flexboxes（打开内部旁边的封闭封面）创建不同尺寸和方向的卡片的图像库。近期的Chrome和Safari版本调整/缩小不同宽度图像的并排div，很好，在浏览器窗口缩小时尊重/保持两个div的相对大小。 Firefox遇到了限制，并开始更加积极地缩小更大的div/img，导致2个不同高度的2个div，并破坏原始布局关系。

有没有这个问题的CSS解决方案，而不是诉诸多个div不同百分比为每个独特的div大小差异或使用@media调用。寻找一个优雅的解决方案（一个div包装器），可以在保持相对高度或宽度的同时缩放并排div并保持相对高度或宽度，而不管卡片放置在div中的尺寸是多少。

我已经尝试了2个百分比的并排，它工作正常，如预期。但是这个解决方案需要创建一堆单独的CSS div来满足Firefox。

在下面的jpg示例中，封面图片是折叠卡和平面卡的相同文件。唯一的区别是底部平卡有css圆角。显然问题在于折叠卡片示例的两种不同宽度。

如果这是唯一的补救措施，我会使用.js解决方案。但我目前的.js技能处于“剪切和粘贴”的水平。 （我的CSS技巧可能只是稍微更好！）

的Chrome/Safari浏览器火狐VS缩放图像的位置： Firefox scaling | Chrome/Safari Scaling

.designFold { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    justify-content: space-around; 
 
    -webkit-justify-content: space-around; 
 
    width: 100%; 
 
    margin:0 auto 1% auto; } 
 

 

 
.spacer { 
 
    flex:0 1 auto; 
 
    -webkit-flex:0 1 auto; 
 
    margin: 0 2%; } 
 
    
 
    
 
.b-sqr { 
 
    flex:0 1 auto; 
 
    -webkit-flex:0 1 auto; 
 
    -moz-flex:0 1 auto; 
 
    width:100%; 
 
    height:auto; 
 
    border: 1px Solid #ccc; 
 
    box-shadow: 8px 8px 7px #f2f2f2; } 
 

 

 
.b-rnd { 
 
    flex:0 1 auto; 
 
    -webkit-flex:0 1 auto; 
 
    -moz-flex:0 1 auto; 
 
    width:100%; 
 
    height:auto; 
 
    border: 1px Solid #ccc; 
 
    border-radius: 25px; 
 
    box-shadow: 8px 8px 7px #f2f2f2; }

<div class="designFold"> 
 
     <div class="spacer"><img class="b-sqr" src="cards/A1-C.jpg"></div> 
 
     <div class="spacer"><img class="b-sqr" src="cards/A1-O.jpg"></div> 
 
</div>

Answer 1

尝试使用https://modernizr.com/ - 它所做的是用标准化的浏览器CSS3和HTML5的区别。许多开发者都使用它。