一次允许一张缩放图像

Question

我仅使用 CSS 和 HTML 就可以使用相当不错的放大/缩小效果。我遇到的问题是，如果用户放大两张图片，两张图片都会在页面上放大。从技术上讲这是它应该做的，但我想知道如何禁用此效果。

这就是我要找的：例如页面上有两个图像。如果我放大一个图像，然后放大另一个图像（同时缩放第一个图像），则第一个图像应该缩小以使第二个图像成为页面上唯一的缩放图像。例如，如果有十张图片，则此原则适用——任何时候只能缩放一张图片。

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

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

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

<div class="container">
    <input type="checkbox" id="zoomCheck1">
    <label for="zoomCheck1">
    <img src="https://www.vintagevelo.co.uk/wp-content/uploads/2018/02/DSC_0040-768x512.jpg" />
    </label>
</div>
<div class="container">
    <input type="checkbox" id="zoomCheck2">
    <label for="zoomCheck2">
    <img src="https://premium-cycling.com/wp-content/uploads/2018/05/FAGGIN-Campione-del-mondo-1980s-frameset-7.jpg" />
    </label>
</div>

Answer 1

使用+单个下一个选择器而不是下一个所有

注意：我建议使用某种更具体的 class 选择器，这样这些样式就不会无意中影响其他元素，并使样式更易于重用。

切换到单选元素，一次只允许检查一个元素。使用 "name" 将它们分组。您还可以为选择器使用名称属性。

document.querySelector('.container').addEventListener('click', e => {
  if (e.target.matches('input[type=radio] + label > img')) {
    e.target.parentNode.previousSibling.previousSibling.checked = !e.target.parentNode.previousSibling.previousSibling.checked;
    e.preventDefault();
  }
});

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

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

input[type=radio]:checked+label>img {
  transform: scale(2.5);
  cursor: zoom-out;
}

img {
  width: 50px!important;
  height: 50px;
}

<div class="container">
  <input type="radio" name="zooms" id="zoomCheck1">
  <label for="zoomCheck1">
    <img class="center round-corner" 
         src="https://i.imgur.com/8qmxbHT.jpeg" />
    </label>
  <input type="radio" name="zooms" id="zoomCheck2">
  <label for="zoomCheck2">
    <img class="center round-corner" 
         src="https://i.imgur.com/8qmxbHT.jpeg" />
    </label>
</div>

一次允许一张缩放图像

Allow one zoomed image at a time

css

css-transitions