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

第 1 步：添加视口

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

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

与缩放相关的HTML5图片代码问题

1 个答案: