0

Mailchimp を使用してレスポンシブ メールに取り組んでおり、最大幅を 160px に設定する必要がある画像を除いて、すべての画像が正常に縮小されています。これはデスクトップでは問題なく表示されますが、幅が 100% より小さいモバイル ディスプレイでは表示されます。

私は以下を設定しました：

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

しかし、それでも小さすぎます。何か案は？

4

2 に答える 2

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"/>

フィドルで何が起こるかを見る前に、まず何が起こるべき[]かを理解できるかどうかを確認してください (属性セレクターに精通している場合)。

わかったと思いますか？フィドルをチェックしてください。

img[class=term]不要であるだけでなく(クラスの選択はimg.term 完全に機能します)、画像の1 つだけを選択します。[attr=term]正確なステートメントに一致し、空白などはありません。それが関連しているかどうかはわかりませんが、注目に値します。それにもかかわらず。

于 2013-03-23T10:27:53.520 に答える
0

要素を参照するには、この標準的な方法に従う必要があるという上記のコメントに同意します。ただし、問題を解決するにはmax-width:auto、コードに追加してみてください。

@media only screen and (max-width: 480px) {
    img[class=mcnImage] {
        width:100% !important;
        max-width:auto;
    }
}
于 2013-03-23T15:21:03.810 に答える