自動使所有圖像引導響應類

Question

是否有必要使html頁面中的所有圖像都具有響應性，而無需鍵入class =“ img-sensitive”和width =“ 100％”？ 因為我使用的是tinymce html編輯器，當我將圖像放入其中時，圖像沒有響應，並且當我使用智能手機瀏覽我的網站時，它看起來已損壞，因此默認情況下也許可以通過某種方法使所有響應成為響應？

也許有一些JavaScript可以做到這一點？ 檢測頁面中的所有img標簽並添加

class =“ img響應” width =“ 100％”

Answer 1

好的，很抱歉，我錯過了一些東西，這個問題已經在這里提出了，所以我只添加了指向答案的鏈接。默認情況下，Twitter Bootstrap 3中沒有響應的圖像？

所以只需添加

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

只需在bootstrap.css的最底部添加此css行，或僅創建一個新的css文件並將其命名為mystyle並將其放在您的每個css鏈接之后即可（我這樣做是為了保持原始的bootstrap.css文件干凈）

Answer 2

您可以使用!important;覆蓋另一個css屬性!important; 作為您的CSS屬性的補充。 因此，在不了解引導程序深度的情況下，您可以嘗試在樣式表中添加類似的內容

img {
    width: 100% !important;
    height: auto !important;
}

或將其插入您的head <style>和</style>之間。

希望這對您有所幫助。 如果您需要其他建議，請告訴我。

更新提供的另一個答案是干凈的答案。 您應該將該回答標記為正確;）

最好的問候，瑪麗安。

Answer 3

無需通過CSS處理此問題。 您可以在tinymce編輯器本身中添加圖像時應用“ img響應式”類。

在tintmce編輯器屬性中添加以下屬性：

image_class_list: [
    {title: 'Responsive', value: 'img-responsive'},
    {title: 'None', value: ''}
],

參考和學分： http : //archive.tinymce.com/forum/viewtopic.php? pid= 114620#p114620