Panzoom 庫並用居中的圖像填充 div

Question

Panzoom 庫 ( https://timmywil.com/panzoom/demo/ ) 允許您在 div 中移動和縮放圖像：

 var panzoom1 = Panzoom(document.querySelector(".zoom-area1"), { maxScale: 6 }); document.querySelector(".zoom-wrapper1").addEventListener("wheel", panzoom1.zoomWithWheel); var panzoom2 = Panzoom(document.querySelector(".zoom-area2"), { maxScale: 6 }); document.querySelector(".zoom-wrapper2").addEventListener("wheel", panzoom2.zoomWithWheel);

 .main-container { display: flex; } .zoom-wrapper1 { width: 300px; height: 300px; border: 5px solid #1C6EA4; } .zoom-wrapper2 { width: 300px; height: 300px; border: 5px solid #1C6EA4; }

 <script src="https://timmywil.com/panzoom/demo/panzoom.js"></script> <div class="main-container"> <div class="zoom-wrapper1"> <div class="zoom-area1"> <img src="https://ironcodestudio.com/wp-content/uploads/2015/03/css-remove-horizontal-scrollbar.jpg" /> </div> </div> <div class="zoom-wrapper2"> <div class="zoom-area2"> <img src="https://image.freepik.com/free-photo/vertical-view-eiffel-tower-paris-france_1258-3169.jpg" /> </div> </div> </div>

一切正常。

現在我希望這些圖像填充它們的 div，但是：

圖像必須垂直和水平居中
如果圖像具有水平方向，則其高度不能高於 div 的高度
如果圖像具有垂直方向，則其寬度不能大於 div 的寬度。 完全像這里： https : //drive.google.com/file/d/1znFq-EJVE4Dv2j9sc3xZUZuMH0bhRsfz/view? usp =sharing

怎么做？ 我正在嘗試不同的方法，但我已經沒有想法了。

Answer 1

我不確定，但我認為這沒問題：

 var zoomWraper1 = document.querySelector(".zoom-wrapper1"); var zoomWraper2 = document.querySelector(".zoom-wrapper2"); var panzoom1 = Panzoom(document.querySelector(".zoom-area1"), { maxScale: 6 }); zoomWraper1.addEventListener("wheel", panzoom1.zoomWithWheel); var panzoom2 = Panzoom(document.querySelector(".zoom-area2"), { maxScale: 6 }); zoomWraper2.addEventListener("wheel", panzoom2.zoomWithWheel); panzoom1.pan(0, 0); panzoom1.zoom(300 / document.querySelector(".zoom-area1 img").height); panzoom2.pan(0, 0); panzoom2.zoom(300 / document.querySelector(".zoom-area2 img").width);

 body { width: 100%; height: 100vh; } button { margin-right: 20px; } .main-container { display: flex; align-items: center; justify-content: center; height: 100%; } .zoom-wrapper1 { width: 300px; height: 300px; border: 5px solid #1c6ea4; display: flex; align-items: center; justify-content: center; } .zoom-wrapper2 { width: 300px; height: 300px; border: 5px solid #1c6ea4; display: flex; align-items: center; justify-content: center; }

 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="main-container"> <div class="zoom-wrapper1"> <div class="zoom-area1"> <img src="https://images.unsplash.com/photo-1552288092-76e7d732366c?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGFub3JhbWljfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80"> </div> </div> <div class="zoom-wrapper2"> <div class="zoom-area2"> <img src="https://i2.wp.com/digital-photography-school.com/wp-content/uploads/2013/08/1.-Moraine_final.jpg"> </div> </div> </div> <script src="https://timmywil.com/panzoom/demo/panzoom.js"></script> <script src="script.js"></script> </body> </html>

絕對的問題是縮放逃逸到兩側，它沒有指向鼠標指向的點。 這需要改進。

Panzoom 庫並用居中的圖像填充 div

問題描述

1 個解決方案

解決方案1
0 已采納 2021-06-29 05:53:15

Panzoom 庫並用居中的圖像填充 div

問題描述

1 個解決方案

解決方案1 0 已采納 2021-06-29 05:53:15

解決方案1
0 已采納 2021-06-29 05:53:15