Panzoom library and filling a div with a centered image

Question

Panzoom library and filling a div with a centered image

1k Views Asked by Dominika Zając At 03 May 2025 at 03:03

The Panzoom library (https://timmywil.com/panzoom/demo/) allows you to move and zoom an image in a 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>

Everything is working properly.

Now I would like these images to fill their divs but:

the image has to be centered vertically and horizontally
if the image has a horizontal orientation, its height cannot be higher than the height of the div
if the image has a vertical orientation, then its width cannot be greater than the div's width. Exactly like here: https://drive.google.com/file/d/1znFq-EJVE4Dv2j9sc3xZUZuMH0bhRsfz/view?usp=sharing

How to do it? I'm trying different ways and I'm already running out of ideas.

Original Q&A

There are 1 best solutions below

**Dominika Zając** · Accepted Answer

I'm not sure, but I think this is ok:

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>

Definitely the problem is that the zoom escapes to the sides, it is not directed to the point pointed by the mouse. This needs improvement.

Panzoom library and filling a div with a centered image

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in PANZOOM

Trending Questions

Popular # Hahtags

Popular Questions