自動製作所有圖像自舉響應類

是否有無論如何使html頁面中的所有圖像都無需輸入class =「img-responsive」和width =「100％」即可響應？因爲我使用的是tinymce html編輯器，當我將圖像放到那裏時，圖像不響應，當我使用智能手機瀏覽我的網站時，圖像看起來破碎，所以也許有一些方法可以使所有的默認響應？自動製作所有圖像自舉響應類

或者也許有一些JavaScript來做到這一點？檢測所有img標籤頁，並通過使用!important;作爲除了你的CSS屬性添加

類= 「IMG響應」 WIDTH = 「100％」

來源

2014-12-12 Laurensius Tony

好抱歉，我錯過了什麼，這個問題已經被問在這裏，所以我只是把一個鏈接到答案 Images not responsive by default in Twitter Bootstrap 3?

所以只需添加

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

只需添加這個CSS線在你的bootstrap.css的最底部，或者只是創建一個新的css文件並命名爲mystyle，並將其放在每個css鏈接之後（我這樣做，以便保持原始bootstrap.css文件清潔）

來源

2014-12-13 00:05:57

您可以覆蓋另一個CSS屬性。所以，不知道引導的深度，你可以嘗試在你的head -section <style>和</style>之間這樣的事情添加到您的樣式表

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

或插入此。

希望這有助於快速提示。如果您需要其他建議，請告訴我。

UPDATE 其他提供的answere是乾淨的。您應該標記該答案是正確的;）

此致敬禮，瑪麗安。

來源

2014-12-13 00:01:50

謝謝你的快速反應，是的，我已經想通了哈哈哈我將標誌着你的答案的答案 – 2014-12-13 00:06:45

它實際上是在這個下面的答案，你不需要！重要的，它的最大寬度 – Christina 2014-12-13 06:38:17

只使用寬度參數會在整個屏幕上拉伸圖像。要保持它的比例，你必須告訴高度自動調整太..... .....如下所示。使這個答案無效！ – 2014-12-13 15:15:17

不需要通過css來處理。您可以在添加tinymce編輯器中的圖像時應用「img-responsive」類。

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

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

來源

2017-05-12 12:44:26 ivp

自動製作所有圖像自舉響應類

回答

相關問題