使用 CSS 放大和缩小鼠标点击

Question

我想只用 CSS 缩放图像。下面的代码在按住鼠标左键时缩放图像，但我想通过单击鼠标来放大和缩小。我怎样才能做到这一点？

 .container img {
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

.container img:active {
  -webkit-transform: scale(2);
  transform: scale(2);
  cursor: zoom-out;
}

原文由 iwsnmw 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

让我们在这里使用一个技巧，一个输入复选框：

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

.container 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="container">
  <input type="checkbox" id="zoomCheck">
  <label for="zoomCheck">
    <img src="https://via.placeholder.com/200">
  </label>
</div>

原文由 Nhan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

基于@Nhan 的回答： https ://stackoverflow.com/a/39859268/661872

更短、范围更广且不需要多个元素的跟踪 ID。

 .click-zoom input[type=checkbox] {
  display: none
}

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

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

 <div class="click-zoom">
  <label>
    <input type="checkbox">
    <img src="https://via.placeholder.com/200">
  </label>
</div>

<div class="click-zoom">
  <label>
    <input type="checkbox">
    <img src="https://via.placeholder.com/200">
  </label>
</div>

原文由 Lawrence Cherone 发布，翻译遵循 CC BY-SA 4.0 许可协议