Фоновое изображение размыто при масштабировании на iPad и iPhone

Question

Я создаю веб-приложение, в котором разрешаю пользователям масштабировать определенные фоновые изображения размером 100x100 пикселей.

Когда они дважды нажимают на изображение, я масштабирую изображение в два раза больше его размера (-webkit-transform: scale (2)).

Когда переход завершен, я меняю изображение размером 100x100px на изображение большего размера, 200x200px.По некоторым причинам изображение очень размытое.

Поэтому я попытался использовать тег img вместо тега div для отображения моих изображений.Здесь изображение совсем не размыто.Почему это так?

Мне НУЖНО использовать фоновые изображения, чтобы обойти ограничение памяти на iPad и iPhone (если я использую теги img, я попаду в стену памяти).

Может ли кто-нибудь мне помочь?Большое вам спасибо.

Answer 1

Я требую 3 вещи:

1. Масштабирование div растягивает пиксели и не добавляет больше.
2. background-size: содержать; Гарантирует, что ваше фоновое изображение полностью отображается
3. Div никогда не изменяет размер.

---

1. Как вы можете см. Здесь Div по-прежнему 200x200 пикселей
2. Размер изображения изменяется до 200x200 пикселей, даже если он 400x400 пикселей. Смотрите здесь
3. Почти доказано в 1. шрифт все еще острый, но javascript считает, что ширина и высота 200x200 пикселей.

---

Ладно, исправьте:

Есть несколько способов.

Вы можете изменить ширину и высоту вместо масштабирования. Это не очень красиво, или, по крайней мере, вам очень повезло, если этой анимации не хватает своего способа броска (на iOS).

Что-то еще может быть масштабированием и обнаружением webkitTranstionEnd

$('div').bind("webkitTransitionEnd", function() {
    $(this).css({
        "-webkit-transform": "scale(1)",
        "width": "400px",
        "height": "400px"
    });
     $(this).unbind("webkitTransitionEnd");
});

Не забудьте отменить привязку события webkitTransitionEnd. Иначе это удвоение вызова функции.

Но что случилось, это анимация назад. Поэтому мы должны сохранить переход в классе, чтобы мы могли добавлять и удалять его, когда захотим:

div {
   -moz-transition-duration: 0ms;
}
div.transition {
    -moz-transition-duration: 200ms;
}

А затем добавьте класс, когда нам нужно оживить:

setTimeout(function() {
    $('div').addClass("transition");
    $('div').css({
        backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
        webkitTransform: 'scale( 2 )',
        mozTransform: 'scale( 2 )'
    });
}, 3000);

И снова удалите его в webkitTransitionEnd

$(this).removeClass('transition');
$(this).css({
   "-webkit-transform": "scale(1)",
   "width": "400px",
   "height": "400px"

* +1045 *}); $ (Это) .unbind ( "webkitTransitionEnd");

Что ??! Это не добавить / удалить класс вовремя ?! Что случилось.

Иногда браузеру нужно немного времени, чтобы убедиться, что класс добавлен. Поэтому вам нужно обернуть настройку css в setTimeout (function () {...}, 0);

setTimeout(function() {
    $('div').addClass("transition");
    setTimeout(function(){
        $('div').css({
            backgroundImage: 'url(http://img812.imageshack.us/img812/212/cssc.png)',
            webkitTransform: 'scale( 2 )',
            mozTransform: 'scale( 2 )'
        });
    }, 0);
}, 3000);

Также, когда мы удаляем класс:

$(this).removeClass('transition');
setTimeout(function(){
    $(this).css({
        "-webkit-transform": "scale(1)",
        "width": "400px",
        "height": "400px"
    });
     $(this).unbind("webkitTransitionEnd");
}, 0);

Так долго, теперь проблема в том, что он масштабируется и становится размытым, а после масштаба он становится очень резким.

Что мы можем с этим поделать, я не знаю, но надеюсь, что это поможет вам где-то!

Andreas