Помогите, если это вообще возможно, реализовать вот такую штуку:
В таком виде оно действительно просто -
https://jsfiddle.net/EugSan/2pz9gcdq/
Но текста справа может быть сколько угодно. И когда его становится много, то картинка остается висеть квадратиком слева -
https://jsfiddle.net/EugSan/0tdywuvh/ 
А хотелось бы, чтобы изображение без искажения пропорций осталось прежним по ширине, но заняло всю высоту блока (левая и правая части картинки соответственно должны обрезаться):
Это сделано через фоновое изображение у родительского блока, а background-size установлен в cover -
https://jsfiddle.net/EugSan/j7fh3535/
Такое поведение меня полностью устраивает. Ну можно разве что дополнительно задать у .teaser какой-то min-height, чтобы картинка уж совсем не «схлопывалась», когда текста будет полторы строчки. Это уже мелочи, да и не будет наверняка в действительности такой ситуации.
Но мне бы хотелось такое реализовать не через фоновую картинку, а именно через img.
JS тоже не хотелось бы использовать, хоть с ним и вообще всё просто становится.
В общем нужно использовать тег img и только через css. Пусть это не будет работать в древних браузерах, это не столь важно.
Возможно, это совсем просто делается, но что-то мне ничего в голову не приходит…
Средний
