7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Quad incAdvent Calendar 2016

Day 7

Sassでアスペクト比固定要素を簡単に作る

Last updated at Posted at 2016-12-07

プログラムどころかhtmlやcssも全く分かっていなかったグラフィックデザイナー上がりの私ですが、htmlとcssはなんとかモノにできた(ハズ)。

未だJSは勉強中。
JSで簡単にできるかもしれないこともCSSでなんとかする変なスキルも身についてきました。

htmlとcssのみでdiv要素などのアスペクト比を固定したい場合にはパディングを使う方法がありますが、いちいちパーセンテージを算出するのは面倒です。

Sassで演算させれば誰でも簡単にできますね。

子要素として画像を入れ親要素にフィットさせたい場合には、親要素にクラスを追加するだけで幅基準か高さ基準のどちらかでフィットさせるように設定しておくともっと便利です。

html
<div class="image-ratio-1by1">
	<img src="http://sample.jpg">
</div>

###アスペクト比固定に関する全体的な設定

SASS

/* アスペクト比固定の物全てに関与する指示 */
*[class*="image-ratio-"] {
	display: block;
	width: 100%;
	position: relative;
	overflow: hidden;

	&::before {
		content: "";
		display: block;
		width: 100%;
		position: relative;
	}
	
	/* 他に何もクラスを入れていないと画像は横幅合わせで100% */
	img {
		display: block;
		position: absolute;
		top: -100%;
		bottom: -100%;
		left: -100%;
		right: -100%;
		margin: auto;
		width: 100%;
		height: auto;
	}
	
	/* height-fitクラスを追加すると画像は高さ合わせで100% */
	&.height-fit img {
		width: auto;
		height: 100%;
	}
}

###比率を指定する設定

SASS
/* 16対9の場合 */
.image-ratio-16by9::before {
	padding-top: (9/16)*100%;
}

/* 3対2の場合 */
.image-ratio-3by2::before {
	padding-top: (2/3)*100%;
}

/* 1対1の場合 */
.image-ratio-1by1::before {
	padding-top: (1/1)*100%;
}

/* 黄金比の場合 */
.image-ratio-golden::before {
	padding-top: (1/1.618)*100%;
}

計算式の割り算の部分に数字を入れるだけだから簡単ですね。

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?