https://qwerty.work/tags/%E3%82%A2%E3%82%B9%E3%83%9A%E3%82%AF%E3%83%88%E6%AF%94/ Recent content in アスペクト比 on qwerty.work Hugo -- gohugo.io ja-JP Mon, 25 Apr 2022 12:44:23 +0900 https://qwerty.work/post/2022/04/svg-aspect-ratio/ Mon, 25 Apr 2022 12:44:23 +0900 https://qwerty.work/post/2022/04/svg-aspect-ratio/ <h2 id="preserveaspectrationoneの追加でok">preserveAspectRatio=&ldquo;none&quot;の追加でOK </h2><p>SVGをレスポンシブで表示させる時にどうしても縦横比（アスペクト比）が固定されてしまい困り果てましたが、解決する方法が分かったのでメモ。</p> <h3 id="ソース例">ソース例 </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-xml" data-lang="xml"><span style="display:flex;"><span><span style="color:#f92672">&lt;svg</span> <span style="color:#a6e22e">preserveAspectRatio=</span><span style="color:#e6db74">&#34;none&#34;</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;/svg&gt;</span> </span></span></code></pre></div><p>たったこれだけでOKでした。あとはなどでSVGを囲んでCSSで調整するのみで解決できました。</p> <h2 id="参考ページ">参考ページ </h2> <div class="link-card"> <a href="https://aya404.com/blog/develop/337_svg-aspect/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://aya404.com/blog/develop/337_svg-aspect/" alt="https://aya404.com/blog/develop/337_svg-aspect/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://aya404.com/blog/develop/337_svg-aspect/</span> <span class="link-card-url">https://aya404.com/blog/develop/337_svg-aspect/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.design-memo.com/coding/object-fit-property" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.design-memo.com/coding/object-fit-property" alt="https://www.design-memo.com/coding/object-fit-property" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.design-memo.com/coding/object-fit-property</span> <span class="link-card-url">https://www.design-memo.com/coding/object-fit-property</span> </div> </a> </div>