Aspect ratio conflict Chrome vs Edge
Hello, I have an issue with the aspect ratio CSS property. The images look okay in Chrome and Firefox, but in Microsoft Edge ( screenshots attached ), they look terrible and zoomed. Is there any solution to solve this, or any other alternative CSS that can achieve the same result in both browsers?
I'm using an aspect ratio of 3.8 in the parent div, which has a display grid to achieve the masonry display of the images
Here is my full css/html codepen example : https://codepen.io/captainAkuma/pen/ZEZRXBM
8 Replies
🤔
how's it rendering with 12+k pixels of width? 🤔
Do you have an
object-fit: cover; max-inline-size:100%; declared on the images?he doesn't have the max-size
You have both your width and height to 100%. Set your width to 100% and the height to auto.
Hi Sven, Thanks for your reply. Yes, setting the height to auto fixed the image height, but the ratio still isn't okay; there is a huge white space under the images
Hi Soufiane, I'm sorry but it's not very clear to me what you are trying to do. The spacing has to do with the way your grid is set up. You have the same height for all rows with your grid-auto-rows calculation. Could you show an example of what you're trying to achieve, with your approach explained?