响应式 png 图标 - 具有透明背景的按钮

Question

我正在开发一种示波器类型的仪器，其中屏幕是移动设备。我正在使用画布绘制示波器图像，并且我有几个按钮来执行设置、设置等功能。对于按钮，我使用 .png 图标，因为它们具有透明背景。如果用户使用平板电脑，一切正常，但我希望能够使用其他设备，如智能手机或笔记本电脑。 我的问题是我无法使 .png 图像响应屏幕尺寸。除了为不同的屏幕分辨率和尺寸提供几个不同的图像之外，还有没有办法让 .png 图标响应？ 这是我的按钮/图标代码（没什么花哨的）：

.thumbs {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 64px;
}

.buttonPNG{
  display:block;
  cursor: pointer;
  border: 1px;
  margin:2px;
} 

<div class="thumbs">
  <div class="buttonPNG"> 
    <img src="./home.png" alt="home" onclick="show_home()">
  </div>
  <!-- several such buttons -->
</div>

Answer 1

我可以调整 PNG 图像大小的唯一方法是使用图片标签。就我而言，这不是最好的解决方案，因为服务器是一个资源有限的小型 ESP32，并且为每个按钮存储多个图像会占用大量闪存。但由于它是迄今为止唯一的解决方案，如果有人觉得它有帮助，我会发布它。可以存在多个源标签和一个 img 标签，如果没有一个源标签匹配，则作为后备。

<div class="buttonPNG">
  <picture >
    <source media="(min-width:650px)" srcset="./next_L.png" onclick="selectionUp()">
    <img src="./next1_S.png" alt="next" onclick="selectionUp()">
  </picture>
</div>

Answer 2

将图像的宽度和高度设置为百分比

如果我正确理解了这个问题，您希望根据屏幕尺寸缩放图像大小。这可以通过将图像的宽度和高度设置为百分比来完成。例如：

width: 70%; height: 70%;

将图像设置为屏幕宽度和高度的 70%。如果您调整窗口大小，图像将变得响应并进行调整。

使用媒体查询

获取响应式图像的另一种方法是媒体查询。您可以做的是说如果屏幕宽度为某个宽度或更小，请将图像设置为特定的宽度/高度。如果用户在屏幕尺寸较小的移动设备上，以下代码会将主体背景设置为浅蓝色：

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

这里是有关媒体查询以及如何使用它们的教程的链接：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

编辑

这就是我要做的：我会为您的图像设置一些样式，以便在计算机上查看它们。然后我会使用媒体查询来判断查看器是否在小屏幕宽度（手机）上，然后更改样式，平板电脑也是如此。一些示例代码：

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  /*Stying for phones*/
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  /*Styling for large phones.*/
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  /*Styling for tablets and ipads*/
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  /*Stying for labtops*/
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .buttonPNG{
  display:block;
  width: 100px; 
  height: 100px;
  cursor: pointer;
  border: 1px;
  margin:2px;
} 
}

所以我设置了一堆查询，说如果用户在具有特定屏幕宽度的特定设备上，则以特定方式设置按钮样式。如果您希望按钮在移动设备上具有 20 像素的宽度和高度，只需在移动循环中添加样式，其中的注释如下所示：

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  .buttonPNG{
  display:block;
  width: 20px; 
  height: 20px;
  cursor: pointer;
  border: 1px;
  margin:2px;
} 

}