CSS SNIPPET

  返回

固定宽高比  页面布局

让长度不定的元素响应式保持固定的宽高比。

HTML
<div class="constant-width-to-height-ratio"></div>
CSS
.constant-width-to-height-ratio {
  background: #333;
  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;
}
效果演示
代码说明
  • padding-top 作用于 ::before 伪元素设置其高度为宽度的百分比。 100%表示元素的高度始终为宽度的100%,得到一个响应式正方形。
  • 可以正常支持元素内容的布局。
浏览器支持

100.0%