保持纵横比自动调整图像大小的更好方法？答案

【问题标题】：Better way to auto resize images mantaning aspect ratio?保持纵横比自动调整图像大小的更好方法？
【发布时间】：2016-05-10 11:18:52
【问题描述】：

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

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

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

但由于某种原因，我不知道什么时候使用该代码，图像周围的文本在它后面。

有没有办法使用其他方法（如 Java 或 Jquery）来实现此结果并避免此问题？

【问题讨论】：

文字与图片是否在同一个 div 中？如果是这样，将其移出到单独的 div 中。还要确保您的图像 div 不是绝对定位或类似的，除非您考虑到它不断变化的大小。
你能在 jsbin.com 上创建一个实例吗？
不能，它在一个从我的 rss 提要中获取数据的 android 应用程序中。我可以制作一个 javascript 将所有图像放在 div 标签中以进行分离吗？像
?

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果你这样做，你最终会得到压扁的图像。我认为这提供了使用 CSS 可以实现的最佳结果：

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

【讨论】：

【解决方案3】：

我在我的页面中添加了这段代码并且它正在工作：

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

【讨论】：

【解决方案4】：

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

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

有助于确保它正确扩展。不确定它会有多大帮助，但希望此链接有所帮助。

我也玩了一点，如果将图像设置为百分比，它似乎可以工作。我将一个浮动到文本的左侧，在屏幕的 50% 处，它重新调整了文本大小。如果您需要我发布示例，请询问。

【讨论】：

【解决方案5】：

使用@media 手动更改手机、平板电脑或台式机的尺寸。顺便说一句，手机和平板电脑将有横向和纵向。如果您使用谷歌浏览器进行检查，您可以更好地确定它。网站示例：Media Queries: How to target desktop, tablet and mobile?

【讨论】：