IEでsvg画像をフルードイメージで表示

[ ID : 872 ]
IEでsvg画像をフルードイメージで表示

概要

SVGをimg要素で表示した場合にIEのみ想定外のサイズになってしまう現象を解消する

用途

  • フルードイメージ(Fluid Image): ブラウザのウィンドウ幅に合わせて画像のサイズをフィットさせる方法。
  • 親要素にサイズが指定されている必要がある

検証ブラウザ

  • Microsoft Edge(最新)
  • IE11
  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)

実装方法


HTML

<div class="c-img">
    <img src="/img/common/logo_dawn.svg"/>
</div>

CSS

/* フルードイメージ用スタイル */
img {
    max-width: 100%;
    height: auto;
}

/* CSSハック や ユーザーエージェント判定での切り替え[記事ID : 732] を参考にIEのみに反映することを推奨 */
img[src$=".svg"] {
    width: 100%;
}

/* 親要素にサイズ指定 */
.c-img {
    width: 90%;
}

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録