JavaScript
5
Вклад в тег
.img{ background-size: cover; width: 100%; }
<div class="img" data-type="responsive-img" data-src="http://rara-rara.ru/pic/8b34f528e82489cd981bf2d8064f8c56.jpg" data-ratio="1.252" data-ratio-720="2.5">
var _fnResize = function()
{
$( '[data-type="responsive-img"]' ).each(function(){
var _img = $( this );
if( !_img.data( 'load' ) )
{
_img.css({ 'background-image': 'url(' + _img.data('src') + ')' });
_img.data( 'load' , true );
}
var _ratio = _img.data( 'ratio' );
if( window.innerWidth <= 720 ) _ratio = _img.data( 'ratio-720' );
_img.css({
height: _img.width() / _ratio
});
});
}
$( document ).ready( _fnResize );
$( window ).on( 'resize', _fnResize );