Javascript CSS Firefox问题：在调整Flexbox大小时，保持Flexbox中不同宽度的并排div的相对大小
我正在使用FlexBox（开放式内部旁边的封闭式封面）创建一个不同尺寸和方向的卡片图像库。Chrome和Safari的最新年份可以调整/缩小不同宽度的并排div图像，并在浏览器窗口缩小时保持两个div的相对大小。Firefox达到了一个极限，开始更积极地收缩更宽的div/img，导致2个不同高度的div，破坏了原有的布局关系 是否有一种CSS解决方案可以解决此问题，而不必为每个唯一的div大小差异求助于多个具有不同百分比的div，或者使用@media调用。正在寻找一种优雅的解决方案（单个div包装），它可以缩放/收缩并排的两个div，同时保持相对的高度或宽度，而不管在div中放置的是什么尺寸的卡 我已经尝试了2个百分比的div并排，效果很好，正如预期的那样。但是这个解决方案需要创建一组单独的CSS div来满足Firefox的需要 在下面的jpg示例中，折叠卡和平板卡的封面图像都是相同的文件。唯一的区别是底部平面卡有css圆角。显然，问题在于折叠卡示例的两种不同宽度 如果这是唯一的补救办法，我将使用.js解决方案。但我目前的.js技能处于“剪切、粘贴和破坏”级别。（我的css技能可能只是稍微好一点！） Chrome/Safari vs Firefox缩放图像如下： |Javascript CSS Firefox问题：在调整Flexbox大小时，保持Flexbox中不同宽度的并排div的相对大小,javascript,css,image-resizing,Javascript,Css,Image Resizing,我正在使用FlexBox（开放式内部旁边的封闭式封面）创建一个不同尺寸和方向的卡片图像库。Chrome和Safari的最新年份可以调整/缩小不同宽度的并排div图像，并在浏览器窗口缩小时保持两个div的相对大小。Firefox达到了一个极限，开始更积极地收缩更宽的div/img，导致2个不同高度的div，破坏了原有的布局关系 是否有一种CSS解决方案可以解决此问题，而不必为每个唯一的div大小差异求助于多个具有不同百分比的div，或者使用@media调用。正在寻找一种优雅的解决方案（单个div包
.designFold{
显示器：flex；
显示：-webkit flex；
证明内容：周围的空间；
-webkit内容：周围的空间；
宽度：100%；
页边距：0自动1%自动；}
.垫片{
flex:01自动；
-webkit flex:0 1自动；
保证金：0.2%；}
.b-sqr{
flex:01自动；
-webkit flex:0 1自动；
-moz-flex:01自动；
宽度：100%；
高度：自动；
边框：1px实心#ccc；
盒影：8px 8px 7px#f2f2；}
.b-rnd{
flex:01自动；
-webkit flex:0 1自动；
-moz-flex:01自动；
宽度：100%；
高度：自动；
边框：1px实心#ccc；
边界半径：25px；
盒影：8px 8px 7px#f2f2f2；}