16:9
16:9
16:9
<div class="sample-16-9"> 16:9<br> @include aspect-ratio(16, 9); </div> <hr> <div class="sample-16-9-400"> 16:9<br> @include aspect-ratio(16, 9, 400);<br> max-width: 400px; </div> <hr> <div class="content"> <div class="sample-16-9">16:9</div> <div class="sample-16-9">16:9</div> <div class="sample-16-9">16:9</div> </div> <hr> <div class="content"> <div class="sample-4-3">4:3</div> <div class="sample-4-3">4:3</div> <div class="sample-4-3">4:3</div> </div> <hr> <div class="sample-16-9-400"> <img src="sample.jpg"> </div>
@mixin aspect-ratio($width, $height, $max-width: none) { position: relative; @if ($max-width != 'none') { max-width: $max-width + px; } &::before { float: left; content: ""; padding-top: round(($height / $width) * 100% * 100) / 100; } &::after { display: block; content: ""; clear: both; } > img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; } } .sample-16-9 { @include aspect-ratio(16, 9); background: lightblue; } .sample-16-9-400 { @include aspect-ratio(16, 9, 400); background: lightblue; } .sample-4-3 { @include aspect-ratio(4, 3); background: lightgreen; }