如何在没有 javascript 的情况下使图像响应？ [关闭]答案

【问题标题】：How to make Image responsive without javascript? [closed]如何在没有 javascript 的情况下使图像响应？ [关闭]
【发布时间】：2013-10-25 02:50:46
【问题描述】：

有多种方法可以在网页中实现响应式图片。但是，我遇到的所有解决方案都使用了 JavaScript。如何在不使用 JavaScript 的情况下实现响应式图像？我们可以通过 CSS 实现图像响应式纯色吗？

【问题讨论】：

你的问题有点含糊。你能更详细地描述一下你想要完成的工作吗？
为什么你不想使用 JavaScript
定义“响应式图片”。您是否想将较低质量的图像版本提供给较小/较低分辨率的浏览器/设备以节省带宽，还是只想在客户端缩小图像？还是别的什么？
对反对票一点也不满意。在发布这个问题之前，我做了一些研究。 - mobile.smashingmagazine.com/2013/07/08/… - css-tricks.com/which-responsive-images-solution-should-you-use - shutterstock.com/blog/2013/05/…
@AnupKhandelwal 投反对票是因为问题不够清楚，我们无法理解您想要什么或回答您。

【解决方案1】：

难以置信的简单。只需使用基于 % 的宽度，图像将填充 XX% 的容器。

根据视口大小将基于容器百分比的宽度设置为整个包装器。

注意：与 HTML5 文档类型不兼容。如果是 HTML5，请按照 Markus 在 cmets 中的建议使用 CSS 声明 width:50%;。

<img src="file.jpg" width="50%" alt="caption" />

【讨论】：

【解决方案2】：

在 css 中添加它使图像始终根据容器的大小具有高度

img
{
height:100%;
width:100%
}

【讨论】：