锚标记 HREF 中的 JPG 在 Android Chrome 中调整大小错误

Question

在此 HTML 代码段中，在提供给 Windows 笔记本电脑（Firefox 或 Edge）和 Android 移动（Chrome）浏览器的基本文档中，原始 JPG 大小很好，但是当单击

<a>

标签时，会意外调整大小安卓。 对于笔记本电脑和 {many} JPG，它会调整大小以适合可用的窗口大小。 对于 Android 上的许多 JPG，图像会变得{非常大}溢出可用的窗口大小。

<a href="someimage.jpg">
    <img border="0" src="someimage.jpg">
</a>

JPG 内部是否有属性集来控制正确/不正确的尺寸？ （也许这会根据 JPG 的来源不规则地设置）。 或者我应该弄乱 CSS 或文档

<meta ...>

来尝试更正？

您可以在这里看到问题的实际情况：http: quatantravel.com\SamJoyce请注意，“第 1 章”大部分工作正常，但第 9 章的图片在 Android 上溢出。

感谢您考虑这种看似奇怪的浏览器行为。

Answer 1

您遇到的问题似乎与如何使用 CSS 设计图像样式有关。

在手机或计算机/笔记本电脑上的网络浏览器中，每个浏览器对图像大小的解释可能不同，尤其是在移动设备上处理更高分辨率的图像时。

CSS 很可能会解决此问题，因为某些移动浏览器不会自动缩放较大的图像以适合视口。

使用 CSS，您可以使用图像上的 max-width 属性确保图像调整为容器大小，并将其设置为 100% 以及将 height 属性设置为 auto。

示例：

`<a href="someImage.jpg">
  <img border="0" src="someImage.jpg" style="max-width: 100%; height: auto;">
</a>`

这将确保图像 100% 为容器的大小，并根据需要在较小的屏幕上缩小（最大宽度属性）。它还将保持图像的纵横比，从而防止失真（高度属性）。

另一个可能的问题可能是如何设置视口元标记。在 HTML 文件的头部，添加下面这行代码将有助于浏览器根据设备屏幕尺寸缩放图像和其他元素：

`<meta name="viewport" content="width=device-width, initial-scale=1"`

希望这些信息对您有所帮助。