https://www.27huis.nl/shared/lib/responsive-image/responsive-image.js

1(function ( ) {
2	"use strict";
3
4	function responsiveImage ($el) {
5		var options, ratio,
6		    $img	=	$el.find("img"),
7		    $window	=	$(window);
8
9		options	=	$.extend(
10			{
11				"ratio":	"16x9"
12			},
13			$el.data()
14		);
15
16		ratio	=	(function getRatio ( ) {
17			var split	=	options.ratio.split("x");
18
19			return {
20				"x":	+split[0],
21				"y":	+split[1]
22			};
23		}());
24
25		function resize ( ) {
26			var width	=	+$el.width(),
27			    height	=	Math.ceil( (width / ratio.x) * ratio.y );
28
29			$el.css({
30				"height":		height
31			});
32
33			center();
34		};
35
36		function center ( ) {
37			var container	=	+$el.width(),
38			    image	=	+$img.width(),
39			    center	=	Math.floor( (container / 2) - (image / 2) );
40
41			$img.css({
42				"left":		center
43			});
44		};
45
46		resize();
47
48		$window.on("resize", resize);
49		$img.on("load", resize);
50
51		// Timing hack
52		setTimeout(function timingHack ( ) {
53			resize();
54		}, 100);
55
56	};
57
58	$.fn.responsiveImage	=	jQueryPlugin("responsiveImage", responsiveImage);
59
60	$(".responsive-image").responsiveImage();
61}());