Help us understand the problem. What is going on with this article?

画像のアスペクト比を維持しながら縮小させるmixin(だけどmixinじゃなくても大丈夫だった)

タグで囲った画像(もしくは背景画像)を、ブラウザの幅縮めてもうまい具合に縮小させてくれるアレです。

scss
@mixin img_ratio($property, $width, $height) {
    #{$property}: percentage($height / $width);
}

使い方

いつもみたいに@includeでよみこんで使いましょう

たとえば、300x200の画像のアスペクト比をpadding-topに出したい場合は

scss
@include img_ratio(padding-top, 300, 200);

になります。

コンパイル後は

css
padding-top: 66.66667%;

こうなりました。

少しだけ解説

+ %とか#{%}とかつけといたらいけるだろう、と思ってたらできませんでした。😂
ので、いろいろと調べてみたわけなんですけども・・・

percentageをつけると、単位のない数値をパーセントに変換してくれます。
公式サイトでは以下のページに解説がありました。

sass:math

個人的によくつかうのでmixin化しました。
ここまちがってるぜ!的な指摘あればぜひぜひ・・・😂

もっと簡単だった

あとからご指摘いただいて、以下のようにすればmixin使わなくてもできるやん、ってなりました😆

scss
padding-top: percentage(200 / 300);

でも私、すぐ忘れてしまうので・・・(考え方とか、手順とか、なぜそうなるのかの部分)
念の為、記事はそのまま残しておくのです・・・😂

torano_tomo
おもに自分用に残していってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした