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

Question

我正在尝试根据屏幕分辨率创建放大或缩小的图像。

我正在使用bootstrap并希望更改图像大小。问题是图像不是很大，如果用户花费浏览器窗口，我不知道如何放大图像。

我的HTML就像：

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

CSS

img{
  width:100%;
}

感谢您的帮助！

Answer 1

这将有助于您 - 这些是用于在响应式视图上调整图像大小的jQuery库

http://responsiveimg.com/

http://responsejs.com/

Answer 2

试试这个：

<强> HTML：

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

<强> CSS：

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

这是DEMO

Answer 3

Bootstrap为响应式网站中的图片提供css。只有你必须给出类img-responsive才能使图像可调整大小。请参阅http://getbootstrap.com/css

中的响应式图片

Answer 4

如果您正在使用Bootstrap 3.0，请为图像提供一类“img-responsive”，因为bootstrap已经具有响应式图像类设置，如下所示：

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

所以对你来说我会用：

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