Calculate aspect ratio of an image to get equal heights with flexbox - html

Question

I was taking a look at:
this code pen about equal responsive height images
I want images to have the same height, despite their width/height differences.
As can be seen in the CSS below, there is usage of flexbox with flex to get the images as this:
/* Important stuff for this demo. */
img {
width: 100%;
height: auto;
vertical-align: middle;
}
.pics_in_a_row {
display: flex;
}
.img1 { flex: 1.3344; } /* <-- how can I calculate this part? */
.img2 { flex: 1.3345; }
.img3 { flex: 0.7505; }
.img4 { flex: 1.5023; }
.img5 { flex: 0.75; }
How can I calculate the part of the flex : number. I guess this is the aspect ratio?

Answer 1

The aspect ratio is X/Y of the image size.
So if the image is 600 pixels wide and 800 pixels high, the aspect ratio would be 600/800=0.75
When knowing this, you can choose one of the methods proposed in the article you referenced:
With the CSS methods, you do have a few options for specifying the
aspect ratio:
Work out the aspect ratio yourself and hard-code it into the CSS (as done in this demo)
Use CSS's calc() to calculate the aspect ratio (e.g. flex: calc(600/800);)
Use a preprocessor to calculate the aspect ratio at build time

Answer 2

I was struggling with this myself. You get the image ratio by dividing its width and height. If you don't use JavaScript just open your calculator and divide image width with the height. If you use JavaScript then to get the flex value you need to divide image width/height. Like this:
const imageRatio = img.naturalWidth / img.naturalHeight;
When getting the value you can use naturalWidth and naturalHeight values that return the original size of the image. I used only height and width in the beginning but it is from the browser and might return incorrect values in some cases (loading image etc).
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth
What I ended up doing is that I calculate the column widths with JavaScript instead of the flex because it doesn't work if there is text inside the column. Then the math becomes more complex. You have to get the ratio of all images, sum them and you get the total ratio. Then you divide the image ratio with this full ratio to get the percentage.
Here is some pseudocode:
const getFullRatio = (images) => images.reduce((acc, curr) => (curr.naturalWidth / curr.naturalHeight) + acc, 0);
const containerWidth = 740;
const columnAmount = images.length;
const columnMargin = 15;
const marginPercentageToAdd = ((columnAmount * columnMargin) / containerWidth) + 1;
const fullRatio = getFullRatio(images);
const fullRatioWithMargins = fullRatio * marginPercentageToAdd;
images.forEach((img) => {
const imageRatio = img.naturalWidth / img.naturalHeight;
const columnRatio = (imageRatio / fullRatioWithMargins) * 100;
const imageParentDiv = img.closest('.COLUMNCLASS');
imageParentDiv.style.width = `${columnRatio}%`;
const image = img;
image.style.width = '100%';
});