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

Posted 2023-03-28

【中文标题】响应式 png 图标 - 具有透明背景的按钮

【英文标题】：Responsive png icons - buttons with transparent background

【发布时间】：2022-01-07 14:21:42

【问题描述】：

我正在开发一种示波器类型的仪器，其中屏幕是移动设备。我正在使用画布绘制示波器图像，并且我有几个按钮来执行设置、设置等功能。对于按钮，我使用 .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"  onclick="show_home()">
  </div>
  <!-- several such buttons -->
</div>

【参考方案1】：

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

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

【参考方案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;
 

【讨论】：

调整大小不适用于 PNG 图像。或者至少我不知道该怎么做。 JPEG/JPG 图像易于调整大小，如何描述，但它们不能有透明背景，所以我不能用它们来创建按钮图标。

不确定你的意思是调整大小不适用于 png 图像。它适用于所有图像类型。我使用了一个菠萝的透明图像示例，并将宽度和高度设置为 50%，当我调整浏览器的大小时，图像的大小也随之调整。最有可能是css中存在错误。这是一些示例代码： freepngimg.com/thumb/pineapple/…" style="width: 50%; height: 50%;"这里是一些用于在浏览器高度和宽度上调整图像大小的代码。 jsfiddle.net/AidanYoung/m4Lzq32e/1

很难解释，但举个例子就很容易了。我想要实现的是流行的风应用程序（天气预报）的效果，其中在屏幕右下角固定位置有一些按钮，您可以滚动地图并放大和缩小地图而无需按钮以更改视口上的大小和位置。但是当在不同的设备上显示时，我希望按钮看起来更大。 （这是一个超过两万行的 C++ 和 JS 程序，CSS 不是我的强项）。

我最后编辑了这个问题，并尝试了一种不同的方法来解决这个问题。您可能正在寻找的解决方案是媒体查询。我在问题中添加了一些关于如何使用它们的代码

感谢您抽出宝贵时间帮助我。我所有的按钮都在一个具有位置的容器中：固定。我会试试你的建议，虽然我确定我以前试过。我认为我的问题是容器。正如您所建议的，我还将尝试使按钮容器 (.thumbs) 具有响应性。不得已是js，我很擅长的地方。