css 容器等比例缩放

现在的网页更注重用户体验，良好的可视化效果也是非常重要的。在页面制作中，较多使用容器来对页面中的元素进行布局，而等比例缩放是一种很好的布局方式。那么我们来看一下CSS容器等比例缩放的实现方式。

.container {
  position: relative; /* 设置定位方式为相对定位 */
  width: 100%; /* 设置宽度为100% */
  height: 0; /* 高度为0 */
  padding-bottom: 60%; /* 设置下内边距百分比，即为高度等于宽度的60% */
}
.inner {
  position: absolute; /* 设置定位方式为绝对定位 */
  width: 100%; /* 设置宽度为100% */
  height: 100%; /* 设置高度为100% */
}
img {
  width: 100%; /* 图片宽度为100% */
  height: 100%; /* 图片高度为100% */
  object-fit: cover; /* 将图片等比例填充到容器中 */
}

在上述代码中，我们使用了一个父容器（.container）来存放图片的子容器（.inner），并通过设置padding-bottom来实现等比例缩放。它的高度等于宽度的60%，也可以根据需求自定义比例。

在子容器中，我们设置了图片的高度和宽度都为100%，同时使用了object-fit: cover来保证图片可以等比例填充整个容器，不留空白。这样就可以兼容不同尺寸的图片，同时保证图片的显示效果。

综上所述，CSS容器等比例缩放是一种非常实用的布局方式。在实际开发中，我们可以根据不同的需求选择是否使用此方法，来实现丰富多彩的页面效果。