Question

我希望当我点击图片然后为我显示大尺寸图片时，就像这样demo。

这是我的图片代码。请在一个html文件中制作，因为这只是html编辑器的webview，所以请不要使用js和css文件。

<p>
    <img src="http://myServerName.com/assets/newsImage/纳吉.jpg" style="width:100%" />
</p>

更新：

input[type=checkbox] {
  display: none;
}

.layout img {
  margin: 100px;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

input[type=checkbox]:checked ~ label > img {
  transform: scale(2);
  cursor: zoom-out;
}
<div class="layout">
  <input type="checkbox" id="zoomCheck">
  <label for="zoomCheck">
   <img src="http://myServer.com/assets/newsImage/纳吉.jpg" style="width:100%" />
  </label>
</div>

Answer 1

尝试这种方法可能希望它适合你

 input[type=checkbox] {
  display: none;
}

.layout img {
  margin: 100px;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

input[type=checkbox]:checked ~ label > img {
  transform: scale(2);
  cursor: zoom-out;
}


<div class="layout">
  <input type="checkbox" id="zoomCheck">
  <label for="zoomCheck">
    <img src="https://placehold.it/200">
  </label>
</div>

html点击图片弹出

1 个答案: