html - 使用复选框在调整后的大小和带有滚动条的原始大小之间切换图像大小

Question

我有一个应用程序使用主 html 模板为不同的产品构建 html 页面。每个产品在应用程序中都分配有许多照片。该应用使用内部循环自动将每张照片的 img 标签插入到主模板的副本中，并为该产品生成网页。

当每个图像首次出现时，应调整其大小以适合其父容器部分。当用户第一次单击图像时，我希望图像以其原始大小显示，并在其父容器内带有垂直和水平滚动条。如果用户第二次单击该图像，它将返回到其限制大小。我不希望父容器在用户单击图像时改变大小。

我正在尝试使用输入复选框来执行此操作，但似乎无法让代码正确地来回切换。

我试图做的是让用户最初看到一系列垂直堆叠的缩略图图像，这些图像自动显示在屏幕宽度的 90% 处。如果他们想要查看更多细节，我希望他们单击​​图像并滚动查看其父级内的全尺寸图像。

在过去，我使用了一个简单的“”目标链接来让他们看到完整尺寸的图像，但在不久的将来将不允许这样做(即不允许站外链接)。我也不能使用任何脚本、iframe 或任何其他会被标记为“事件内容”的技术。

我正在使用以下 css 和 html。我在程序中使用了每个图像的索引(0、1、2 等)来为每个图像的属性提供唯一的输入 ID 和标签。因此，第一张图片的每个属性都将分配为 0，而第二张图片将分配给 1。

.imgholder .checkimg{
    display:none;
}

.imgholder{
    position:relative;
    width:90vw;
    overflow:auto;
    margin: 10px 0px;
    clear: both;
}

img{
    max-width:100%;
    max-height:100%;
}

.checkimg:checked ~ label img{

}


<!--Begin Program Loop-->

<div class="imgholder">
<input class="checkimg" type="checkbox" id="[[image.index]]"><label for="[[image.index]]"><img src="[[image.imageURL]]"></label>
</div>

<!--End Program Loop-->

Answer 1

这是一个工作示例。这只展示了如何实现主要功能。您可能需要调整图像的大小，因为它们可能会因奇怪的纵横比而变形。

.imgholder {
  position: relative;
  width: 90vw;
  height: 300px;
  overflow: auto;
  margin: 10px 0px;
  clear: both;
}

.imgholder .checkimg{
  display: none;
}


img {
  display: block;
  width: 100%;
  max-height: 100%;
}

.checkimg:checked + img {
  width: auto;
  max-height: none;
}

<div class="imgholder">
  <label for="i1">
    <input class="checkimg" type="checkbox" id="i1">
    <img src="http://lorempixel.com/g/1000/500"/>
  </label>
</div>

<div class="imgholder">
  <label for="i2">
    <input class="checkimg" type="checkbox" id="i2">
    <img src="http://lorempixel.com/g/1000/500"/>
  </label>
</div>

<div class="imgholder">
  <label for="i3">
    <input class="checkimg" type="checkbox" id="i3">
    <img src="http://lorempixel.com/g/1000/500"/>
  </label>
</div>