Javascript 在CSS中使用type=radio缩小图像

我正在尝试只使用CSS和HTML对页面上的图像进行互斥的放大和缩小。通过互斥，我的意思是，如果有两个图像，其中一个图像放大，那么如果我放大第二个图像（查看代码片段），放大的图像应该缩小。这个功能非常好，只是我不能再缩小图像了

我怎样才能解决这个问题

输入[类型=收音机]{
显示：无；
}
.集装箱img{
宽度：100%；
变换：变换0.25秒；
光标：放大；
}
输入[类型=无线电]：选中+标签>img{
转换：比例（2.5）；
光标：缩小；
}
img{
宽度：100px！重要；
高度：60px；
}

---

下面是一个使用jQuery的示例：

jQuery（“img”）。在（“单击”，函数（）{
让parent=jQuery（this.parent（）；
toggleClass（“zoomin”，！parent.hasClass（“zoomin”）；
parent.sides（）.removeClass（“zoomin”）；
});
.container
{
边缘：2米；
}
.集装箱img{
宽度：100%；
变换：变换0.25秒；
光标：放大；
}
.container.zoomin img{
转换：比例（2.5）；
光标：缩小；
}
img{
宽度：100px！重要；
高度：60px；
}
问题在于单选按钮状态已设置，单击所选单选按钮时，不会取消选择

如果您可以使用java脚本，那么您可以用许多不同的方法来处理它。但由于您只需要html和css，所以我唯一能想到的方法就是使用

在您的单选输入周围添加表单标签，并有一个重置按钮。单击重置将使单选按钮移动到默认的取消选择状态。你的图像会缩小

通过-表单标签和重置按钮

<form>
<div class="container">
    <input type="radio" name="zooms" 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="radio" name="zooms" 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>
  <hr />
  <input style='margin:5%' type='reset' />
</form>



它必须是输入元素吗？可以使用javascript吗？可以，JS可以。我是这些语言的新手，因此我求助于CSS HTML