html点击图片弹出 [英] html click image pop up

问题描述

我想要点击图片，然后为我显示大尺寸图片，就像这样演示。

I want when I click the image then showing big size image for me, like this demo.

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

This is my image code. And please make in one html file, because this is just a webview by html editor, so no js and css file, please.

<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>

推荐答案

试试这个方法可能希望它对你有用

Try this method may hope it will work for you

 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点击图片弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！