我有一个小图片库,我正在创建效果,使用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/
也许我正在尝试做更好的方法?