如何根据分辨率更改图像大小？

Question

我正在尝试创建一个基于屏幕分辨率放大或缩小的图像。

我正在使用引导并希望更改图像大小。问题是图像不是那么大，如果用户花费浏览器窗口，我不确定如何放大图像。

我的HTML是这样的：

<div> 
<img class='col-md-12' src='img.png'/> 
</div> 

CSS

img{ 
    width:100%; 
} 

感谢您的帮助！

Answer 1

引导程序为响应站点中的图像提供css。只有你必须给类img-responsive使图像可调整大小。看到响应图像http://getbootstrap.com/css

Answer 2

如果您使用引导3.0给图像一类的“IMG响应”事业的引导已经具备了响应图像类设置，如下所示：

.img-responsive { 
    display: block; 
    height: auto; 
    max-width: 100%; 
} 

因此，对于你我使用：

<div> 
    <img class="img-responsive" src='img.png'/> 
</div> 

Answer 3

这将帮助你 - 这些都是jQuery的库调整图像的响应视图

http://responsiveimg.com/

http://responsejs.com/

Answer 4

试试这个：

HTML：

<div> 
<img class='col-md-12' src='test.jpg'/> 
</div> 

CSS：

div{ 
    width: 100%; 
} 
img{ 
    min-width:100%; 
    height:auto; 
} 

这是一个DEMO