Question

我正在使用此代码在移动页面上自动将图像调整为窗口大小：

img {
  width:100%;
  max-height : auto;
  max-width : 480px;
}

我的目的是在小屏幕上以适当大小的窗口显示图像，在更大的屏幕上显示最大480像素，保持比例。

但由于某种原因，我不知道何时使用该代码，图像周围的文字就会落后于它。

有一种方法可以使用Java或Jquery等其他方法来实现此结果，并避免出现此问题吗？

Answer 1

如果您为移动设备执行此操作，我会建议服务器调整大小以节省下载大小。

关于落后的文本，您是否有更全面的测试用例，显示此CSS适用的实际文档？

Answer 2

如果你这样做，你最终会被压扁的图像。我认为这可以通过CSS实现最佳效果：

#content img {
    width: 100%;
    height: auto;
    max-width: 480px;
}

Answer 3

我在我的页面中添加了此代码并且正在运行：

img {
  width:100%;
  max-height : auto;
  max-width : 480px;
}

Answer 4

您是否尝试过针对不同屏幕尺寸使用不同的样式表？然后，您只需要为每种情况编写代码，然后加载所需的样式。如果您有其他需要根据尺寸更改的样式，它也会派上用场。在移动网站上非常有帮助。

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

有助于确保缩放正确。不确定它会有多大帮助，但希望这个链接有所帮助。

我也玩过一点，如果你将图像设置为百分比，它似乎也有效。我将文本左侧的一个浮动，屏幕的50％，并重新调整文本大小。如果您需要我发布示例，请询问。

Answer 5

使用@media按手机，平板电脑或桌面尺寸进行手动更改。顺便说一句，手机和平板电脑将拥有风景和肖像。如果您使用谷歌浏览器检查，您可以更好地确定它。网站样本：Media Queries: How to target desktop, tablet and mobile?