如何根据窗口大小调整图像大小

Question

我正在设计a，我希望图像在较小的尺寸（移动屏幕）上缩小，但在桌面上放大至最大宽度。示例页面为located here。在样式表（see here中，我将img设置为max-width：100％，但它似乎不起作用。有人有建议吗？

Answer 1

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

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

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

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

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

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

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

-->

---

img {
  max-width:100%;
}

在CSS中添加后效果很好

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

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

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

证明：