30秒学会 CSS 片段 – 固定宽高比

假定元素的宽度可变，它的高度会自动适应 (比如其 width 和 height 可以保持固定的宽高比).

• 在伪元素 :before 上设置 padding-top 可以使元素的高度与宽度成一定的比例。比如设置成 100% 意味着高度始终是宽度的 100% ，也就是一个自适应的正方形。
• 这种方法也确保了内容可以正常地保持在元素内部。

预览

HTML

<div class="constant-width-to-height-ratio"></div>

CSS

.constant-width-to-height-ratio {
  background: #0f8bdac7;
  width: 50%;
}

.constant-width-to-height-ratio:before {
  content: '';
  padding-top: 100%;
  float: left;
}

.constant-width-to-height-ratio:after {
  content: '';
  display: block;
  clear: both;
}

翻译自：https://www.30secondsofcode.org/css/s/constant-width-to-height-ratio