お世話になります。
構築中のサイトに、SVG画像を実装しています。
IE11も対象ブラウザにしているのですが、SVG画像がうまく表示されません(IE11以外は問題なく表示されます)。
サイトのアクセス時やリロード時は、問題なく表示されるのですが、
ブラウザ幅を変えて、画像を伸縮させようとすると、画像が縦長になったり、下が切れたりします。
ただ、全てではなく、一部の画像にこういったことが起こっています。
以下、ソースコードです。
<!-- HTML --> <picture> <source media="(min-width:768px)" srcset="img/example_pc.svg"> <source media="(max-width:767px)" srcset="img/example_sp.svg"> <img src="img/example_pc.svg" alt="Access"> </picture> <p> <img src="img/example.svg"> </p>
//CSS p { width: 50vw; } img[src$=".svg"] { width: 100%; height: auto; }
HTMLでは、上記のように <picture> あるいは <img> で画像を呼び出しており、
その要素を <p> などのブロック要素で囲っています。
CSSでは、ブロック要素に"width"、"img"に"100%"を指定し、幅を設定しています。
また、HTML内に以下のように"width"を設定したりもしてみましたが、効果はありませんでした。
<picture> <source media="(min-width:768px)" srcset="img/example_pc.svg"> <source media="(max-width:767px)" srcset="img/example_sp.svg"> <img src="img/example_pc.svg" alt="Access" width="100%"> </picture> <p> <img src="img/example.svg" width="100%"> </p>
解決策をご存知の方、お力を貸していただけると、大変助かります。
どうぞよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー