概要
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%;
}
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
