用CSS覆蓋圖像大小

我正在嘗試使博客的移動主題中的圖像適合移動屏幕。我指的是文章中的圖像，而不是像頭部等主題的一部分。用CSS覆蓋圖像大小

我得到的一個問題是，博客軟件自動添加像素的高度和寬度。這是源代碼的樣子：

<div class="leftbox"><img src=".mysite.net/blog/media/Photo/Indian_tourists.jpg" width="400" height="267" alt="Indian tourists" title="Indian tourists" /></div>

我想用CSS來覆蓋圖像的代碼，最大寬度：100％，這樣的情況下，圖像比屏幕尺寸更大，它可以修復它。

有人告訴我把下面的代碼放在手機主題css文件的底部。

.post_content img { 
height: auto !important; 
max-width: 100% !important; 
}

我試過這段代碼，但不幸的是它沒有工作。有人可以幫助我嗎？

來源

2014-09-19 Mayank Gupta

你可以使用JS來刪除這些屬性嗎？ – kornieff 2014-09-19 03:22:13

對不起，但我不是專家。你能解釋一下嗎？ – 2014-09-19 03:24:18

你不需要成爲專家。 http://api.jquery.com/removeattr/ – rfoo 2014-09-19 04:26:10

如果你的DIV類leftbox那麼你可以使用下面的代碼在你的CSS文件

.leftbox img { 
    height: auto !important; 
    max-width: 100% !important; 
}

來源

2014-09-19 04:18:12

對不起，但它沒有奏效。 CSS無法覆蓋。 – 2014-09-19 04:50:39

好的，你能告訴我整個託管頁面的URL，以便我可以告訴你它是如何完成的。 – 2014-09-19 04:55:10

這是網址，但您必須從移動設備訪問它，否則桌面版網站將顯示。 http://www.easydestination.net/blog/index.php?itemid=3162 – 2014-09-19 04:57:05

試試這個

<div class="leftbox"><img src=".mysite.net/blog/media/Photo/Indian_tourists.jpg"  width="400" height="267" alt="Indian tourists" title="Indian tourists" /></div>

CSS

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

或添加此css文件

img[style] { 
    height:auto !important; 
    max-width:100% !important; 
    }

來源

2014-09-19 05:17:10 Justin

更改圖像標籤將是困難的，因爲我將不得不手動對超過3000篇文章。我嘗試了第二種選擇，但它不能跨平臺工作。例如，它修復了Chrome OS中的圖像，但不是Opera Mini上的圖像。 – 2014-09-19 05:34:30

第二個選項是最好的方法，它與所有主流桌面瀏覽器兼容..我不知道移動瀏覽器。我在第一個選項中做了一些修改..試試試試 – Justin 2014-09-19 07:46:52

感謝Justin第二個選項（.leftbox），你和Usman建議我爲它工作。感謝所有的幫助。 – 2014-09-20 12:16:54

用CSS覆蓋圖像大小

回答

相關問題