CSS照片库，点击放大，简单答案

【问题标题】：CSS photo gallery with zoom on click, simpleCSS照片库，点击放大，简单
【发布时间】：2021-12-04 11:08:20
【问题描述】：

我想做一个简单的照片库，当您单击照片时，它会显示得更大。我希望它是纯 CSS 并且在 HTML 代码中也没有复杂性，只是一个 div 包装图像。到目前为止我能做到的最好的：

.photo-galery-with-zoom {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: equally-spaced;
    
}

.photo-galery-with-zoom img {
    max-height: 19vh;
    margin: 5px;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    transition: filter .2s;
}

.photo-galery-with-zoom img:hover:not(:active) {
    filter: drop-shadow(0 0 4px black);
}

.photo-galery-with-zoom img:active {
    position: fixed;
    top: 0;
    max-width: 88vw;
    max-height: 88vh;
    z-index: 99999;
    transition: 0s;
}

<div class="photo-galery-with-zoom">
<image src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/lionel-animals-to-follow-on-instagram-1568319926.jpg?crop=0.922xw:0.738xh;0.0555xw,0.142xh&resize=640:*"></image>
<image src="https://www.boredpanda.com/blog/wp-content/uuuploads/cute-baby-animals/cute-baby-animals-2.jpg"></image>
<image src="https://i.pinimg.com/736x/a7/c6/55/a7c65551c76a4870e9c9082d05750658.jpg"></image>
</div>

我希望能够在不按住鼠标按钮和鼠标悬停的情况下保持缩放。我想要的是“单击→缩放，再次单击→取消缩放”。有可能吗？

【问题讨论】：

是的，应该可以。您是否使用单选按钮进行过调查？
或者可能是复选框？
感谢您的建议。会看看那个。如果您能发布一个示例，我将不胜感激。
稍微简化的示例放入答案中。

标签： html css gallery

【解决方案1】：

这是您的代码的略微简化版本，但在每个图像顶部放置了一个输入复选框。

当复选框（尽管不可见，透明度为 0）被单击时，这可能会影响使用 input:clicked + img 选择器的紧随其后的 img 元素。然后将 img 和复选框都展开以覆盖所有内容，因此当再次单击时， :checked 状态消失，一切都恢复到初始状态。

显然，您将想要确定您希望所有内容的大小，因为该 sn-p 所做的另一件事是为每个图像的位置设置固定大小，并确保可以通过使用 object- 看到整个图像适合包含。

.photo-galery-with-zoom {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: equally-spaced;
}

.photo-galery-with-zoom label {
  position: relative;
}

.photo-galery-with-zoom img {
  height: 19vh;
  width: 19vh;
  object-fit: contain;
}

.photo-galery-with-zoom input:checked+img {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  background: white;
  object-fit: contain;
}

.photo-galery-with-zoom input {
  width: 19vh;
  height: 19vh;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
}

.photo-galery-with-zoom input:checked {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

<div class="photo-galery-with-zoom">
  <label>
    <input type="checkbox" name="galery" onclick="event.stopPropagation();"/>
    <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/lionel-animals-to-follow-on-instagram-1568319926.jpg?crop=0.922xw:0.738xh;0.0555xw,0.142xh&resize=640:*">
    </label>
  <label>
    <input type="checkbox" name="galery" onclick="event.stopPropagation();"/>
    <img src="https://www.boredpanda.com/blog/wp-content/uuuploads/cute-baby-animals/cute-baby-animals-2.jpg">
    </label>
  <label>
    <input type="checkbox" name="galery" onclick=" event.stopPropagation();"/>
    <img src="https://i.pinimg.com/736x/a7/c6/55/a7c65551c76a4870e9c9082d05750658.jpg">
    </label>
</div>

【讨论】：

【解决方案2】：

是的，看看这段代码它会在悬停时放大

<html>
    <head>
        <style>
#div {
    border-radius: 3px;
    border: 2px solid black;
    transition: 0.5s;
    width: 500px;
    height: 200px;
}
#div:hover {
    transform:scale(1.2);
}

        </style>
    </head>
    <body><br><br>
        <center>
<div id="div">
    <h1>hello</h1>
</div>
</center>
    </body>
</html>

【讨论】：

Weberg Studios：请看问题。他需要点击，而不是悬停。