I am using cards to display images. I am showing images in a row. The number of images in a row can change. The sizes of images are different. They don’t have same height and width. Because of this, the card height is also changing.
I want to have same height for all the cards even though the image sizes are different. And when we drag screen size the images and cards height and width should change in the same proportion.
I tried fixing the height of each card in to a fixed height in percentages. I played with positioning the cards and images also. But when i drag the screen again the image or the card height is not changing in the same proportion. It should have same card height irrespective of the device or browser or images in the card.
Please have a look at the codepen
Please have a look at the Stackoverflow question also
Can some one help me on this?