Question

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

当每个图像首次出现时，应调整其大小以适合其父容器分区。当用户第一次点击图像时，我希望图像以其原始大小显示，并在其父容器中使用垂直和水平滚动条。如果用户第二次单击图像，则返回其约束大小。当用户点击图片时，我不希望父容器的大小发生变化。

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

我尝试做的是允许用户最初看到一系列垂直堆叠的缩略图图像，这些图像会自动以90％的屏幕宽度显示。如果他们想要查看更多细节，我希望他们点击图片并在其父部门内滚动全尺寸图片。

过去我曾经使用过简单的＆＃34;＆＃34;目标链接，以允许他们看到完整大小的图像，但在不久的将来将不允许这样（即，不允许非现场链接）。我也不能使用任何脚本，iframe或任何其他技术，这些技术会被标记为＆＃34;活动内容＆＃34;。

我正在使用以下css和html。我已经在程序中使用了每个图像的索引（0,1,2等），以便为每个图像提供唯一的输入ID和属性标签。因此，第一个图像将分配给这些属性中的每一个，而第二个图像将具有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>

使用Checkbox在其调整大小和大小之间切换图像大小带滚动条的原始尺寸

1 个答案: