覆蓋最大寬度（或放大移動的小圖像）

我正在使用Mailchimp處理響應電子郵件，並且所有圖像都縮小，除非圖像必須將最大寬度設置爲160px。這在桌面上表現良好，但在移動顯示屏上寬度小於100％。覆蓋最大寬度（或放大移動的小圖像）

我已經設置了以下內容：

@media only screen and (max-width: 480px) { 
    img[class=mcnImage] { 
     width:100% !important;

但它仍然出現偏小。有任何想法嗎？

來源

2013-03-23 user1591241

'img [class = mcnImage]'？做'img.mcnImage'。 '.'是一個類選擇器。「如果* ever *需要'|重要的'，你也應該謹慎。你有沒有讀過關於如何計算選擇器的優先級？ – 2013-03-23 10:12:47

[特異性]（https://developer.mozilla.org/en-US/docs/CSS/Specificity）。 – 2013-03-23 10:18:28

正如我上面的評論所述，可能有兩件事情可能是合法的。然而，這是純粹的猜測，但考慮一下......

CSS

img[class=one] { 
    border: 5px solid blue; 
}

HTML

<img src="http://dummyimage.com/50x50" class="one"/> 
<img src="http://dummyimage.com/50x50" class="one "/> 
<img src="http://dummyimage.com/50x50" class=" one"/> 
<img src="http://dummyimage.com/50x50" class=" one "/> 
<img src="http://dummyimage.com/50x50" class="one two"/>

看到對小提琴發生了什麼之前，先看看你可以找出應該發生（如果你熟悉[]屬性選擇器）。

認爲你明白了嗎？檢查出fiddle。

img[class=term]不僅是不必要（類選擇與img.term作品完美），但它僅選擇圖像的一個。 [attr=term]匹配一個確切的語句，沒有空格或任何東西。我不知道這是否相關，但值得注意。不過。

來源

2013-03-23 10:27:53

很好的解釋 – 2013-03-23 10:31:41

同意上面的評論，你應該遵循這個標準的方式來引用元素..但是對於你的問題的解決方案，你可以嘗試添加max-width:auto到你的代碼;

@media only screen and (max-width: 480px) { 
    img[class=mcnImage] { 
     width:100% !important; 
     max-width:auto; 
    } 
}

來源

2013-03-23 15:21:03

覆蓋最大寬度（或放大移動的小圖像）

回答

相關問題