Как сделать чтобы image менял размер как вот на сайте hublot??

Question

[Vasiliy]

Очень интересную штуку наблюдаю на hublot
www.hublot.com/en
Кликнете по мужику с лысиной (на красном фоне) и посмотрите как в зависимости от ширины окна браузера происходит resizing image. Height с 720px становиться все меньше и меньше это через js сделано??

Я пытаюсь повторить, но что-то никак...
codepen.io/Vasiliy63/pen/vNGLXY

P.S пока у мужика лучше получается ресайзица))

Answer 1

[Александр Антонов]

Адаптивные изображения?
.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 );

jsfiddle.net/q7sbeoay/1

Comments

[Vasiliy]

Уау))), очень круто получилось). Спасибо!

[Vasiliy]

codepen.io/Vasiliy63/pen/vNGLXY там вторая картинка, так тоже наверное можно?