SVG画像をHTMLにimgタグで挿入しています。
html
1 <div class="corresponding_industry_example_contents"> 2 <img src="/img/corresponding_i_e_1.svg" alt="クリニック"> 3 <img src="/img/corresponding_i_e_2.svg" alt="ビジネス"> 4 <img src="/img/corresponding_i_e_3.svg" alt="法律関係"> 5 <img src="/img/corresponding_i_e_4.svg" alt="グルメ・飲食"> 6 <img src="/img/corresponding_i_e_5.svg" alt="旅行・宿泊"> 7 <img src="/img/corresponding_i_e_6.svg" alt="禁輸関係"> 8 </div>
css
1 .corresponding_industry_example_contents { 2 display: flex; 3 flex-wrap: wrap; 4 } 5 6 .corresponding_industry_example_contents img { 7 width: calc((100% -50px)/3); 8 margin-right: 25px; 9 10 @media screen and(max-width: 769px) { 11 width: calc((100% -7px)/2); 12 margin-right: 3.5px; 13 margin-bottom:4px; 14 } 15 16
スマートホンで見ると、上記画像のように SVGの画像下(margin:bottom)に意図していない余白ができています。
画面を横にすると
余白は無くなりcssで指定したmargn-bottom4pxが効いています。
ネットで調べてみたところ、
<svg>タグの中の、x,y位置指定の直前に、preserveAspectRatio="none"
の指定をいれてあげるとなんと左右余白がきえた!!!
とあったので、svgファイルにpreserveAspectRatio="none"の記述を入れたところ
画像のように上下の余白はcssの数値が効いているようですが、画像の縦横比が崩れてしまいました。
どうすれば画像の縦横比を保ったままcssで指定したmargin-bottomを効かせる事ができるでしょうか?
あなたの回答
tips
プレビュー