Переопределение максимальной ширины (или масштабирование небольшого изображения для мобильных устройств)

Question

Я работаю над отзывчивым электронным почтовым сообщением, используя Mailchimp, и все изображения масштабируются в порядке, отличном от изображения, которое должно иметь максимальную ширину, равную 160 пикселей. Это отлично подходит для настольных компьютеров, но на мобильных дисплеях размером менее 100%.

Я настроил следующее:

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

Но он по-прежнему приходит слишком мало. Есть идеи?

Answer 1

Как мои комментарии выше состояния, возможно, есть несколько вещей, которые могут быть законно мешаться здесь. Тем не менее, это чистая спекуляция, но на минуту ...

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] соответствует точно выражению, без пробелов или чего-то еще. Я не знаю, связано ли это, но стоит отметить. тем не менее.

Answer 2

согласен с приведенным выше комментарием, что вы должны следовать этому стандарту, чтобы ссылаться на элементы. Но для решения вашей проблемы вы можете попробовать добавить max-width:auto к вашему коду;

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