如何使用引導程序調整圖像大小

我有一個關於產品的網站。每個產品文章都有文字和一些圖像。圖像範圍從400px寬度到700px寬度。產品文章存儲在SQL Server數據庫中，文章基於productid動態提取。如何使用引導程序調整圖像大小

我使用Bootstrap使我的網站移動友好。我有兩列的佈局。該產品文章被包含在一個DIV標有

class="col-md-12 row"

當我縮小頁面大小進行預覽會怎樣看在移動設備中的文字很好地調整自己，但圖像沒有。現在我有大約3000個這樣的圖像，並且如果存在必須應用於每個單獨圖像標籤的屬性，那將是不可行的。

是否有任何其他方式使用CSS或引導程序或JavaScript，我可以減小設備大小的圖像大小，保持圖像縱橫比完好？

2015-04-15 Hitz

只需將其添加到樣式表的某個位置，它將應用於您網站上的所有圖像。

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

2015-04-15 05:27:26 Tom

湯姆，是現貨。感謝您分享你的知識。 – Hitz

在圖片標籤中使用class =「img-responsive」。這將根據屏幕尺寸自動調整尺寸。它是一個自舉類。

2015-04-15 04:26:52 user2024285

感謝您的回答，但我在帖子中提到我擁有3000多張圖片。單獨將此類添加到3000張圖像將不可行。 – Hitz

DOM準備就緒後，您可以使用javascript/jquery添加此屬性。 – user2024285

@ user2024285在這種情況下只使用通用選擇器img {width：100％}。 –

嘗試增加這CSS

.col-md-12 img {width:100%}

2015-04-15 04:35:46

嘗試這個。

<div class="row"> 
<div class="col-md-4"> 
    <img class="thumbnail img-responsive" src="h.jpg" /> 
</div> 
</div>

2015-04-15 05:06:09

回答