How to fit the image in the parent unit?

Help, if at all possible, to implement this thing:
toster-fit-img-s1.jpg
As such, it really just - https://jsfiddle.net/EugSan/2pz9gcdq/
But the text on the right can be any number. And when it becomes many, the picture remains hanging box on the left https://jsfiddle.net/EugSan/0tdywuvh/
toster-fit-img-s2.jpg
And I would like to have the image without distorting the proportions remained the same in width, but over the full height of the block (left and right of the picture respectively to be circumcised):
toster-fit-img-s3.jpg
This is done through a background image from the parent block and background-size set to cover - https://jsfiddle.net/EugSan/j7fh3535/
This behavior will make me happy. Well, except that you can additionally ask from .teaser of some min-height to the picture is absolutely not "shapefiles" when the text is one and a half lines. It's the little things, and will not for sure in reality this situation.

But I would like to implement this not using a background image, and it is through img.
JS too do not want to use, at least with him and everything just gets.

In General, you need to use the img tag and using css only. Let it will not work in ancient browsers, it is not so important.

Perhaps this is easy to do, but something I did not think of...
July 8th 19 at 15:27
1 answer
July 8th 19 at 15:29
Solution
There will a css property object-fit
css-live.ru/articles/znakomstvo-s-object-fit.html
Sure! What you need. Really stuck and sit blunt. Thank you! - nikita.Stracke commented on July 8th 19 at 15:32
: there is a button "mark as solution") - timmothy.Tromp43 commented on July 8th 19 at 15:35
: caniuse.com/#search=object-fit - cleve_Murray commented on July 8th 19 at 15:38

Find more questions by tags CSSHTML