レスポンシブで画像サイズを100%にしたら、アイコンまで大きくなってしまったメモメモ

@media only screen and (max-width:768px) {
img {
    width: 100%;
    }
}

こんな感じでレスポンシブ対応していたところ、15pxくらいのimg（アイコン）も横幅いっぱいになってしまいました。

まぁ全ての(img)に適用しているので当たり前っちゃ当たり前なのですが。。。

ちょっと面倒くさいので、そのままのサイズで良い画像要素にclassを書いて通常サイズで表示する方法で対応しました。

備忘録がてら方法を記載します。
誰かの何かの役に立てば幸いです。

@media only screen and (max-width:768px) {
img {
    width: 100%;
    }
img.icon {
    width : auto;
    }
}

「img.icon」をcssに追加して

↓

<img class="icon" src="img/icon.png" />

該当の画像にclassを付与。

これで横幅（width）が上書きされて、元のサイズで表示されます。

タグ: | 2016年10月26日

« »

関連記事