有没有办法编写一个按钮，用 css/html 转换同一页面上的图像？

Question

我正在编写一个关于我们太阳系的网站。我在网页中间制作了一个太阳系，我想编写一些按钮，这些按钮链接到这些行星之一，当点击这些行星时，它们会改变所选行星的规模。

所以我的问题是：如何将按钮链接到图像？

我已经在互联网上查看过，但找不到解决方案。由于我开始学习 css 和 html，所以我自己无法提出解决方案。

我认为解决我的问题不需要我的代码。

Answer 1

这是一个免费的示例。欢迎来到 SO！

scaleImg = (id) => {

  const el = document.getElementById(id);
  
  el.style.transform = 'scale(3)';

}

#testy {
  background: url('https://i.stack.imgur.com/BVW9D.jpg') no-repeat center;
  background-size: cover;
  height: 5rem;
  width: 5rem;
  
  position: absolute;
  top: 20%;
  left: 20%;
  transform: translate(-20%, -20%);
  transition: transform 1s ease;
}

<div id="testy"></div>

<br/><br/>

<button onclick="scaleImg('testy')">Click Me</button>