javascript - 如何在没有 javascript 的情况下使图像响应？

Question

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

更新我在发布这个问题之前做了一些研究。- - https://github.com/scottjehl/picturefill - http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/ - http://css-tricks.com /您应该使用哪个响应图像解决方案/

Answer 1

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

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

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

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

Answer 2

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

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