I have a div which contains an image and another div with text. The image serves as a background image (I have some reasons, why I do not want to do it via the background-image property). The text of the inner div should be vertically centered in the outer div.
The outer div has width: 100% for responsive behavior with narrow devices.
My approach works as you can see here: https://jsfiddle.net/wLo80jdh/
One thing I need to change is to set the height of the image to auto in order to not (!) stretch it. However, if I set height: auto then the text of the inner div is not vertically centered anymore as you can see here: https://jsfiddle.net/wLo80jdh/1/
My question is: How can I set the height to auto (no stretched image) + vertically center the text?
I forked you fiddle and adjusted it to fit your needs. i used flexbox for that
https://jsfiddle.net/x9u0dxm8/