Is it possible to make a responsive div with a background-image that maintains the ratio of the background-image like with an ?

Question

Not a a native english speaker so there\'s probably a better way to shape the question...anyway:

What I want to create is similar to the header here: http://thegreatdisc

Answer 1

You just need to pass the height to width ratio to the element. For an image 1400x600;

1400:600 = 98:42

span( style="padding-bottom:42%;
             width:98%;
             background:url('/images/img1.jpg');
             background-size:contain;
             display:inline-block;")

would display the same as

img(src="/images/img.jpg" style="width:98%;")