html - 有什么方法可以编写一个按钮，该按钮可以使用 css/html 在同一页面上转换图像？

Question

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

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

我已经在 Internet 上查找过了，但找不到解决方案。我自己想不出解决方案，因为我开始学习 css 和 html。

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

Answer 1

这是一个免费赠品示例。欢迎来到 SO!

scaleImg = (id) => {

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

}

#testy {
  background: url('/image/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>