[CSS] width 100%で縦横比を固定

heightを0にして、padding-topを%で指定する

Sass

.v-box {
	width: 100%;
	height: 0;
	padding-top:75%;
	background-color: gray;
}

html

<div class="columns">
				<div class="column">Ch1<br><div class="v-box"></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p></div>
				<div class="column">Ch2<br><div class="v-box"></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p></div>
				<div class="column">Ch3<br><div class="v-box"></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p></div>
			</div>

なるほど

(Visited 1 times, 1 visits today)