Question

一个代码示例代码示例以滚动条的形式显示原始大小的图像，而另一个代码示例缩放图像以适合其父级。

我想最初显示按比例调整大小的图像，并在用户执行某些操作（点击，悬停等等）后，图像以滚动条的全尺寸显示。当用户停止执行操作时，图像返回基本上我想做的是在两个状态之间切换，而不会弄乱页面的布局。

我的图像本质上可以是横向和纵向，最大尺寸为5184像素，可以显示细节，但大多数都被裁剪为2500到4100.

限制：

不允许使用任何类型的脚本 - 它们将被删除。
不允许<a>个链接 - 它们将被剥离。
没有任何有效的内容 - 将被删除。
我无法将图像的实际宽度和高度插入<img>标记，因为我正在使用程序生成html模板，但无法访问这些维度。
< / LI>
我想看到图像被调整大小到用户屏幕的分区，因此上面的96vh代码（不确定这是否是正确的技术）。

到目前为止，我尝试使用各种方案，使用带有隐藏复选框切换的分区，并尝试使用<ul>列表，但我似乎无法使所有内容正常工作。我通常可以使用一个版本的图像，但它通常会破坏图像的其他版本的查看方式，或者更糟糕的是，它会混淆页面布局。

使用内部滚动条显示全尺寸图像：

<center>
  <div class="gsimagewrapper">
    <img class="gsimage" src="http://anthology.vastserve.com/kimtechto-1476773165-95808.jpg">
  </div>

  <div class="gsimagewrapper">
    <img class="gsimage" src="http://anthology.vastserve.com/kimtechto-1476773167-95809.jpg">
  </div>
</center>

.gsimagewrapper {
  position: relative;
  width: 96vw;
  height: 96vh;
  overflow: auto;
  margin: 1vh 0px;
  padding: 0px;
  box-sizing: border-box;
}

.gsimage {
  max-width: none;
  height: auto;
}

在分区内显示缩小版图像：

.gsimagewrapper {
  position: relative;
  width: 96vw;
  height: 96vh;
  overflow: auto;
  margin: 1vh 0px;
  padding: 0px;
  box-sizing: border-box;
}

.gsimage {
  width: 100%;
  height: auto;
}

Answer 1

受到这个答案的启发：Can I have an onclick effect in CSS?

您可以尝试使用复选框作为按钮。这是JSFiddle：https://jsfiddle.net/sxpgvj6z/

<强> HTML

<center>
<div class="gsimagewrapper">
  <input type="checkbox" id="btnControl"/>
  <label class="btn" for="btnControl">
    <img class="gsimage" src="http://anthology.vastserve.com/kimtechto-1476773165-95808.jpg">  
  </label>
</div>  
</center>

<强> CSS

#btnControl { display: none; }

.gsimagewrapper { position: relative;   width: 96vw;   height: 96vh; overflow: auto;   margin: 1vh 0px;   padding: 0px;   box-sizing: border-box; }

.gsimage {   max-width: none;   height: auto; }

#btnControl:checked + label > img {
    width: 100%;
    height: auto; 
}

图像查看器 - 在缩略图和完整尺寸之间切换

1 个答案: