如何使我的图像对移动查看器具有响应性？ [复制]答案

【问题标题】：How do I make my images responsive for mobile viewers? [duplicate]如何使我的图像对移动查看器具有响应性？ [复制]
【发布时间】：2020-09-01 15:59:02
【问题描述】：

我查看了许多其他有关此问题的主题，但似乎没有一个解决方案有效。例如， max-width: 100% 和 height: auto 不会使图像响应。它们在桌面上的 IE、FF 和 Chrome 上看起来很棒。问题是它们不适用于移动设备，包括适用于 Andriod 10 的 chrome 和运行 iOS 13 的 Safari。我的知识范围在这里用完了，所以我需要帮助。

<div class="image">
    <img src="images/last-supper.png" alt="The Last Supper by Leonardo da Vinci">
</div>

.image {
    padding-top: 2.5em;
    width: 100%;
    max-width: 600px;
    height: auto;
}

这是我尝试width:100% height:auto 和max-width: 600px 之前的代码，我还尝试从<meta> 中删除shrink-to-fit=no 我在外部CSS 样式表和内联HTML 上都尝试过，但都没有奏效。请大家帮我解决这个问题并找出问题所在吗？

完整代码的 GitHub 仓库：https://github.com/ErichMB/the-christian-gallery

Gh 页面部署：https://erichmb.github.io/the-christian-gallery/

【问题讨论】：

一些观察。在您提供的 CSS 中，您没有实现您尝试过的示例，并且在您的 img 标签中，您的尺寸内联取代了 CSS。
抱歉，我认为在尝试之前显示代码会更有用。我现在要编辑
我会尝试使用 max-width:100% 而不是 600px 并将其包装在宽度为 600px 的 div 中。这将允许图像调整大小，并允许您稍后使用代码。并且不在 img 标签本身上使用内联宽度。
你的仓库有 Git 冲突标记。不过，您确实应该在此处以代码 sn-p 显示一个简化的演示。我们不需要查看您的整个页面。只是图像样式。
您将样式放在包装器 div 上。它们属于图像。 jsfiddle.net/isherwood/Lf7bd58w

标签： html css image mobile responsive

【解决方案1】：

您可以尝试使用<picture> 元素 - https://www.w3schools.com/tags/tag_picture.asp，这样您实际上可以使用针对移动设备的完整单独图像，而不是缩放。

我通常使用 375px（移动）、768px（平板电脑）和 1280px（桌面）。

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

【讨论】：

这并不一定会根据屏幕大小调整图像大小，尽管这是一个很好的策略。