与缩放相关的 HTML5 图片标签问题

【问题标题】：HTML5 picture tag issue related to zoom与缩放相关的 HTML5 图片标签问题
【发布时间】：2021-05-17 00:42:23
【问题描述】：

我们如何在 HTML5 中使用图片标签来有效地缩放图像？缩放图像时，将显示媒体查询中给出的图像，而不是 srcset 中与设备像素比一起给出的图像。

这是我提到的网站之一：https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/

请在下面找到我使用的代码。

<picture>
  <source media="(min-width: 767px)" srcset="../images/kitten-large.png 1x, ../images/kitten-medium.png 2x, ../images/kitten-small.png 3x">
  <source media="(min-width: 480px)" srcset="../images/gallery-img-3.jpg">
  <img src="../images/kitten-large.png" >
</picture>

【问题讨论】：

标签： html

【解决方案1】：

第 1 步：添加 Veiwport

&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

第 2 步：添加代码

 <style>
    .zoom {
      padding: 50px;
      background-color: green;
      transition: transform .2s; /* Animation */
      width: 200px;
      height: 200px;
      margin: 0 auto;
 background-image: url("your_image.png");
 background-color: #cccccc;
    }

    .zoom:hover {
      transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    }
    </style>

    <div class="zoom"></div>

希望，它可能会有所帮助。

【讨论】：