How do I auto-adjust the height of a nested, fixed width div, according to the contained image?

HTML-CSS
1

I have read several options for achieving this, but I am afraid that the div containing the image is multi-nested, so the changes don’t take effect.

I have tried to set the height to auto on all parent divs too, still doesn’t work.
Should I keep overflow: hidden on all divs?

If I set the image to “cover”, I don’t even get the full width image.
So I set it to “contain”, and that gives me the full width, but the height is cropped both on the top and buttom, as you see.

What I want is:
the proper settings for the image and the divs so, that:

  1. the image will show at full width, scaled automatically (the width of the column/div is fixed)
  2. the height of the image will scale automatically according to the scaled width so that the full image will be visible, and it will force to containing div heights to scale according to the image height.
2

If you want to auto adjust something, just set the css attribute to ‘auto’,
like overflow:auto; or position:auto;
and other stuff like that.

3