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

Question

我们如何在 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>

Answer 1

第一步:添加视口(viewport)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

第 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>

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