如何让图片无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文档类型不兼容。如果是HTML5，请按照Markus在评论中的建议使用CSS声明width:50%;。

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

Answer 2

添加这个在CSS使图像根据容器

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