How to push an image to the edge to two elements at once?

Question

css

<div class="main">
  <div class="container">
    <img ...>
  </div>
</div>

In CSS, container has a limited width, while main has a height. How to fit an image to main height and container width?

Answer 1

img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

Set the height to 100% for the container too. It will
work if main has a height explicitly specified