如何创建可根据不同手机尺寸调整大小的响应式图像？

Posted 2023-05-08

【中文标题】如何创建可根据不同手机尺寸调整大小的响应式图像？

【英文标题】：How do I create responsive images that resize with different mobile phone sizes?

【发布时间】：2021-03-11 03:39:18

【问题描述】：

我正在开发的移动网站https://lowlifeclothing.co/ 将每个 .gif 图像完美地放置在我一直在进行 beta 测试的 iPhone 11 Pro Max 上，但在较小的屏幕分辨率上，图像会剧烈移动并破坏网站的设计.

您可以通过在此处更改网站的手机类型/分辨率大小来了解我的意思； https://bluetree.ai/screenfly/?u=https%3A//lowlifeclothing.co&a=20&b=10

该网站类似于老式的猎鹿游戏，我用于鹿动画的代码如下；

jQuery(function($) 
  $("#image1").click(function() 
    $(this).attr("src", "https://lowlifeclothing.co/wp-content/uploads/2020/11/Loop12D.gif");
    var url = $(this).attr("data-click-href");
    setTimeout(function() 
      window.location.href = url;
    , 1000);
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://lowlifeclothing.co/wp-content/uploads/2020/11/Loop12.gif" data-click-href="https://lowlifeclothing.co/shop/" id="image1">

如何让鹿的图像、按钮和菜单在每台移动设备上保持在同一个位置？

我已使用边距和填充来定位它们，因此当我在 iPhone 11 Pro Max 上进行 Beta 测试时它们非常适合，但它们会随着不同的屏幕分辨率（例如在 iPhone 6 上）发生剧烈移动。

【参考方案1】：

您不必使用 JS 来响应地调整图像大小。 只需使用 CSS 透视宽度/高度百分比来正确调整大小。 通常，在开发移动网站时，您希望固定在整个设备宽度上的图像将以width: 90vw;为中心。

也许这会对你有所帮助：https://www.impressivewebs.com/width-100-percent-css/

【参考方案2】：

使用这个：

宽度：100% 和高度：100%

img 
 width: 100%;
 height: 100%;