Question

我有一个小图片库，我正在创建效果，使用transform: scale()来查看它们。

问题在于，在较低的分辨率下，当我点击视口附近的图像时，它的一部分会出现在视口之外。

我想找到一个解决方案，将项目放在视口内，保持比例效果（或任何其他类似比例的效果/方法）。

这是标记：

<article>
  <input type="checkbox" id="g1" hidden>
  <label class="lightbox" for="g1"><img src="http://via.placeholder.com/640x420" alt=""></label>
  <input type="checkbox" id="g2" hidden>
  <label class="lightbox" for="g2"><img src="http://via.placeholder.com/640x420" alt=""></label>
  <input type="checkbox" id="g3" hidden>
  <label class="lightbox" for="g3"><img src="http://via.placeholder.com/640x420" alt=""></label>
  <input type="checkbox" id="g4" hidden>
  <label class="lightbox" for="g4"><img src="http://via.placeholder.com/640x420" alt=""></label>
</article>

CSS：

article { display: flex; flex-wrap: wrap }
article > label {
    display: block;
    width: calc(25% - 10px);
    margin: 5px;
    overflow: hidden;
            transition: .5s transform;
         -o-transition: .5s transform;
        -ms-transition: .5s transform;
       -moz-transition: .5s transform;
    -webkit-transition: .5s transform;
}
article > label > img {
    display: block;
    width: 100%;
}
article > label > img:hover {
    cursor: zoom-in;
    opacity: .6
}
input[type="checkbox"]:checked + label {
    transform: scale(2.5);
    z-index: 1;
}
input[type="checkbox"]:checked + label > img:hover {
    cursor: zoom-out;
    opacity: 1
}

https://jsfiddle.net/c5syoy4x/

也许我正在尝试做更好的方法？

缩放项目在视口外

0 个答案: