Problème CSS Firefox: Maintenir la taille relative des divs côte à côte de différentes largeurs à l'intérieur d'une Flexbox lors du redimensionnement

Question

Je crée une galerie d'images de cartes de différentes dimensions et orientations à l'aide de Flexboxes (couvertures fermées à côté des intérieurs ouverts). Les millésimes récents de Chrome et Safari redimensionnent/rétrécissent les divs côte-à-côte de différentes largeurs d'images, tout en respectant/conservant les tailles relatives des deux div comme la fenêtre du navigateur se rétrécit. Firefox atteint une limite et commence à réduire plus agressivement div/img plus large, résultant en 2 divs de 2 hauteurs différentes et détruisant la relation de mise en page originale.

Y at-il une solution CSS à ce problème SANS recourir à plusieurs divs avec des pourcentages différents pour chaque différence de taille div unique ou en utilisant des appels @media. Vous recherchez une solution élégante (une seule enveloppe div) qui redimensionne/réduit les divs côte à côte tout en conservant la hauteur ou la largeur relative, quelle que soit la taille de la carte placée à l'intérieur de la div.

J'ai essayé 2 divs de pourcentage côte à côte, et cela fonctionne bien et comme prévu. Mais cette solution nécessitera la création d'un tas de div CSS individuels juste pour satisfaire Firefox.

Dans les exemples jpg ci-dessous, l'image de couverture est le même fichier pour la carte pliante et plate. La seule différence est la carte plate du bas a css coins arrondis. Clairement le problème est avec les deux largeurs différentes de l'exemple de carte pliante.

Je vais utiliser une solution .js si c'est le seul remède. Mais mes compétences actuelles .js sont au niveau «couper-coller et casser». (Ma compétence css peut être légèrement meilleure!)

Chrome/Safari vs Firefox mise à l'échelle image ici: 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

essayez d'utiliser https://modernizr.com/ - ce qu'il fait normalise les différences de CSS3 et html5 avec les navigateurs. Beaucoup de développeurs l'utilisent.