javascript - CSS - 触摸屏放大时更改背景网址

Question

我正在使用触摸屏工作，在此屏幕 (1920 x 1080) 上，用户可以使用手指进行平移和缩放。

在此屏幕上，我正在显示平面图。这一直是一场噩梦，让它们在不放大和放大时看起来不模糊....这是我的 css 代码，图像在不放大时看起来不错

.blackline {
    text-align: center;
    position: absolute;
    top: 375px;
    height: 850px;
    width: 1058px;
    background: url('/images/floorplans/test-2.png') top center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #FFF;
}

<div class="blackline"></div>

我有另一个名为 test.png 的图像，在触摸屏上放大时看起来不错。

我的问题是，我是否可以在放大时使用 css、html、javascript 或 jquery 更改背景图像，并在不放大时将其改回原样？这可能吗？

Answer 1

最好考虑 SVG 图像，因为在缩放时不会扭曲自身(即使更改缩放也不必更改它)。

另一种方法是通过 JQuery 根据缩放级别更改背景图像:

var zoom = document.documentElement.clientWidth / window.innerWidth;
$(window).resize(function() {
    var zoomNew = document.documentElement.clientWidth / window.innerWidth;
    if (zoom != zoomNew) {
        // zoom has changed
        // change the background image accordingly
        //and set new zoom as current zoom
        zoom = zoomNew
    }
});