My goal is to design a banner featuring various accepted payment icons. I aim to resize the images so that they all have the same height, which is the maximum height possible to fit all images in a single row. The images vary in size and aspect ratio, including logos like MasterCard ID Check, so achieving uniformity is a challenge.
While I successfully implemented this in Safari, the solution fails in both Chrome and Firefox, each with its own issues.
Desired outcome in Safari:
https://i.sstatic.net/Dsi4r.png
In Chrome, all images fit within the row but with varied heights:
https://i.sstatic.net/aEXrI.png
For Firefox, all images are scaled to the same height, yet the wrappers overflow the flex container:
https://i.sstatic.net/vLtwn.png
Initially, I simply placed the <img> tags as children of the flex container. However, it became clear after some research that I needed to wrap them in <div> elements, scale those divs (as children of the flex container), and let the image sizes adjust automatically. Most examples I found dealt with scaling in the opposite direction, but after some adjustments, I got it working in Safari, my default browser.
What is the best cross-browser approach to achieve my desired outcome?
HTML:
<div class="payment-icons">
<div class="icon-container">
<img class="icon payment-icon" src="1.svg">
</div>
<div>...</div>
...
</div>
CSS:
// flex container
.payment-icons {
display: flex;
justify-content: space-between;
padding-top: 10px;
max-width: 281px;
margin-left: auto;
margin-right: auto;
}
// flex items
.payment-icons .icon-container {
min-width: auto;
}
// images
img { // from an earlier rule; included here in case it matters
display: block;
height: auto;
max-width: 100%;
}
img.payment-icon {
height: auto;
width: 100%;
}
The working (or not) example can be viewed here: