SVGをimgタグで使うとき
- #SVG
img { max-width: 100% height: auto; } レスポンシブデザインでは上記のようなスタイルをよく使いますが、このimgタグがSVG画像だった場合、ブラウザの幅を縮めていくとサイズがカクカク変化して、途中で前後左右におかしな余白が入ったりしたんですが、svgファイルをエディタで開いて、svgタグに preserveAspectRatio=...
img { max-width: 100% height: auto; } レスポンシブデザインでは上記のようなスタイルをよく使いますが、このimgタグがSVG画像だった場合、ブラウザの幅を縮めていくとサイズがカクカク変化して、途中で前後左右におかしな余白が入ったりしたんですが、svgファイルをエディタで開いて、svgタグに preserveAspectRatio=...
参考記事:https://css-tricks.com/snippets/sass/correctly-adding-unit-number/ レスポンシブの場合、たとえばpaddingについて、Sassで計算結果の単位に%をくっつけたいことがよくある。そのやり方。 .hogehoge { padding-left: 40 / 780 * 100 + 0%; } あるいは .hogehoge { padding-left: 40 / 780 * 100 * 1%; } こ...
mintcodeフロントエンドエンジニア
a-blog cms / WordPressの構築とコーディングを得意とするフリーランスです。 a-blog cms 公式サイトにて、「WordPress ユーザーのための a-blog cms 入門」を連載させていただきました。