Responsive preview card component using flexbox and grid

In a column layout it is very easy to manage the size of an image while making a responsive design. We can give a specific width to the container (which contains the image) and make the image's width 100% of the container width and use properties like 'object-fit' , 'object-position' , 'background-size' , etc to make the image responsive.

But, what happens when we are dealing with height of an image in a row-based layout (i.e. in mobile layout) ?

1. Either in flexbox, when flex-direction is set to column.
2. Or in GRID based layout.

How do we now make an image responsive now ? It would very helpful if someone could give a very simple explaination. If the explaination seems to be long , you can also point me to a article on the internet.