如何根據分辨率更改圖像大小？

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