JQuery Адаптивный переход изображения изображения

Question

Кто-нибудь знает, как преобразовать этот эффект jQuery, вместо того, чтобы иметь изображения фиксированного размера, мне нужно установить размер в процентах (ширина:100%; высота: авто), чтобы они могли реагировать. Есть идеи?

    <script type="text/javascript">
$(function (){
    $('img.fade').each(function (){
        var $$ = $(this);

        var target = $$.css('background-image').replace(/^url|[\(\)'"]/g, '');

        $$.wrap('<span style="position: relative;"></span>')
            .parent() // span elements
            .prepend('<img>')
            .find('img:first')
            .attr('src', target);

        $$.css({
            'position' : 'absolute',
            'left' : 0,
            'top' : this.offsetTop 
            });

        $$.hover(function () {
            $$.stop().animate({
                opacity: 0.2
            }, 250);
        }, function () {
            $$.stop().animate({
                opacity: 1
            }, 350);
        });
    });
});

</script>

Answer 1

Я думаю, вы имеете в виду, что фоновое изображение не масштабируется.

Вы можете использовать команду css "background-size" для решения этой проблемы.

Значения, которые могут вам помочь, это "покрытие" или "содержание": http://www.w3schools.com/cssref/css3_pr_background-size.asp

var target = $$.css('background-image').replace(/^url|[\(\)'"]/g, '').css({ 'background-size': 'cover' });

Если это не работает, вы можете считать фактическую абсолютную ширину вашего изображения и установить его как background-size. Но тогда вам нужно событие resize для масштабирования окна браузера.

Я бы рекомендовал использовать две картинки и показывать / скрывать картинки вместо использования фонового изображения для наведения.