缩放项目在视口外

时间:2018-05-02 00:13:57

标签: css

我有一个小图片库,我正在创建效果,使用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 个答案:

没有答案