如何根据窗口大小调整图像大小[关闭]答案

【问题标题】：How do I resize an image based on window size [closed]如何根据窗口大小调整图像大小[关闭]
【发布时间】：2019-05-28 03:43:09
【问题描述】：

我正在设计一个，我希望图像在较小的（移动屏幕）上缩小，但在桌面上放大到最大宽度。示例页面是located here。在我的样式表 (see here) 中，我将 img 设置为 max-width:100%，但它似乎不起作用。有人有什么建议吗？

【问题讨论】：

【解决方案1】：

CSS 不是 HTML 语言，它对“乱码”代码非常敏感。根据浏览器及其版本的不同，损坏的 CSS 可能会以不同的方式表现出来。

请从您的 CSS 文件中删除这些“分隔”行：

-----------------------------------------------------

它们会破坏 CSS，并且肯定会导致页面上的样式呈现错误。

如果您希望或必须将它们用作视觉助手，则必须将它们包装在适当的 CSS 注释语法中，如下所示：

/* ---------------------------------------------------- */

此外，您必须从第 109 行删除这些字符：

-->

img {
  max-width:100%;
}

在您的 CSS 中添加时效果很好

但是，您应该将您的 CSS 规则限制为更具体，上述规则将应用于您 HTML 页面上的所有图像，这在大多数情况下并不是真正想要的效果（当然，除非它是）。

在您的特定页面中， .row 似乎是一个可靠的候选者（因为您没有左或右容器）。无论如何，将其应用于所有行：

.row img {
    max-width: 100%;
}

证明：

【讨论】：