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

Question

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

UPDATE 在发布这个问题之前我做了一些研究。 - - https://github.com/scottjehl/picturefill - http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/ - http://css-tricks.com/which-responsive-images-solution-should-you-use/

Answer 1

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

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

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

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

Answer 2

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

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