如何在不增加圖像尺寸的情況下放大圖像？

Question

我想在圖像上獲得縮放效果但不增加屏幕尺寸，我可以使用“transform：scale（）”為圖像獲得一種縮放，但我不想占用它的空間增加，這是我增加scale（）時發生的事情。

我怎么能得到這個？ 我已經實現的當前效果是在我的測試網站上，將來將是一個博客/產品組合： http ： //marcosroot.pythonanywhere.com/blog/

懸停在圖像中會發生這種效果。

PS：代碼如下：

&__media {
    transition: transform .25s ease-in-out;

    &:hover {
        transform: scale(1.025);
    }
}

Answer 1

這種方法沒有依賴關系，適用於所有現代瀏覽器。 JavaScript通過setProperty更新CSS變量，並在移動鼠標時動態更新縮放圖像的background-position 。

 const zoomify = (width, height) => { const el = document.querySelector('.zoomify'); el.style.width = `${width}px`; el.style.height = `${height}px`; el.addEventListener('mousemove', handleMouseMove, false); } function handleMouseMove(e) { const dimensions = this.getBoundingClientRect(); const [x, y] = [ e.clientX - dimensions.left, e.clientY - dimensions.top ]; const [percentX, percentY] = [ Math.round(100 / (dimensions.width / x)), Math.round(100 / (dimensions.height / y)) ]; this.style.setProperty('--mouse-x', percentX); this.style.setProperty('--mouse-y', percentY); } zoomify(320, 212); 

 * { box-sizing: border-box; } html, body { padding: 10px; } .starting-image { width: 100%; height: 100%; } .zoomify { display: inline-block; position: relative; overflow: hidden; } .zoomify::after { content: ''; position: absolute; z-index: 1; width: 100%; height: 100%; opacity: 0; background-image: url("https://images.unsplash.com/photo-1528763216729-fb67cba479db?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=728e3916b52b079634aa7c7f82af612d&auto=format&fit=crop&w=6774&q=80%206774w,%20https://images.unsplash.com/photo-1528763216729-fb67cba479db?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=728e3916b52b079634aa7c7f82af612d&auto=format&fit=crop&w=6774&q=80%206774w"); background-size: cover; background-position: center center; background-repeat: no-repeat; will-change: background-position; } .zoomify:hover .starting-image { opacity: 0; position: absolute; } .zoomify:hover::after { opacity: 1; background-size: 250%; cursor: zoom-in; background-position: calc(var(--mouse-x) * 1%) calc(var(--mouse-y) * 1%); } 

 <div class="zoomify"> <img class="starting-image" src="https://images.unsplash.com/photo-1528763216729-fb67cba479db?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=728e3916b52b079634aa7c7f82af612d&auto=format&fit=crop&w=6774&q=80%206774w,%20https://images.unsplash.com/photo-1528763216729-fb67cba479db?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=728e3916b52b079634aa7c7f82af612d&auto=format&fit=crop&w=6774&q=80%206774w" alt="diner"> </div>