0

我一直在研究 jQuery 图像放大解决方案，几乎可以完美运行。但是（我相信这可能与使用object-fit: cover有关）当图像被放大时，它会略微失真。放大图像的background-size由下一行决定，我认为这可能是失真的原因，因为它正在检索 img 的边界框，而不是真实尺寸（再次，由于object-fit: cover）。但是，我需要使用object-fit: cover，因为我希望我的所有 .image 容器保持相同的纵横比，而不管图像如何。

var imgWidth = img.outerWidth();

任何想法如何防止失真？

HTML

<div class="image">
    <img src="myurl.jpg" />
    <div class="magnify-lens"></div>
    <div class="magnify-result"></div>
</div>

SCSS

// Image
.image {
    position: relative;
    // Force aspect ratio
    width: 100%;
    height: 0;
    padding-bottom: 75%; // 3:4 ratio
    background-color: white;

    // Image
    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    // Magnify lens
    .magnify-lens {
        position: absolute;
        width: 100px;
        height: 100px;
        z-index: 2;
        pointer-events: none;
    }

    // Magnify result
    .magnify-result {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-color: $white;
        opacity: 0;
        z-index: 1;
        pointer-events: none;
    }

    // States
    &:hover {

        // Magnify result
        .magnify-result {
            opacity: 1;
        }
    }
}

查询

// For each
$('.image').each(function() {

    // Vars
    // Setup elements
    var container = $(this);
    var img = $(this).find('img');
    var lens = $(this).find('.magnify-lens');
    var result = $(this).find('.magnify-result');

    // Image attributes
    var imgSrc = img.attr('src');
    var imgWidth = img.outerWidth();
    var imgHeight = img.outerHeight();

    // Calculate the ratio between result and lens
    var cx = result.outerWidth() / lens.outerWidth();
    var cy = result.outerHeight() / lens.outerHeight();

    // Set background image on result
    result.css('background-image', "url('" + imgSrc + "')");
    // Set background size on result (multiply img size by calculated ratio between result and lens)
    result.css('background-size', (imgWidth * cx) + "px " + (imgHeight * cy) + "px");

    // Functions
    // Move lens
    function moveLens(e) {

        // Get cursor x and y positions
        var parentOffset = container.offset();
        var relX = e.pageX - parentOffset.left;
        var relY = e.pageY - parentOffset.top;

        // Prevent the lens from being positioned outside the image
        if ( relX > imgWidth - lens.outerWidth() ) { relX = imgWidth - lens.outerWidth(); }
        if ( relX < 0 ) { relX = 0; }
        if ( relY > imgHeight - lens.outerHeight() ) { relY = imgHeight - lens.outerHeight(); }
        if ( relY < 0 ) { relY = 0; }

        // Set the position of the lens
        lens.css('left', relX + 'px');
        lens.css('top', relY + 'px');

        // Display what the lens "sees"
        result.css('background-position', '-' + (relX * cx) + 'px -' + (relY * cy) + 'px');
    }

    // On mouse/touch move
    $(this).on('mousemove touchmove', function(e){
        moveLens(e);
    });
});
4

0 回答 0