[分享]css3怎样设置宽高等比

CSS3是一种流行的样式语言，它可以帮助我们实现许多美丽的网页效果。设置宽度和高度等比例是常见的问题，我们可以使用CSS3来轻松实现。{ boxsizing: borderbox; width: 10...

CSS3是一种流行的样式语言，它可以帮助我们实现许多美丽的网页效果。设置宽度和高度等比例是常见的问题，我们可以使用CSS3来轻松实现。

{
  box-sizing: border-box;
  width: 100%;
  padding-top: 75%; /* 4:3 aspect ratio */
  position: relative;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
} 

在上述代码中，我们使用了box-sizing属性来设置盒子模型的计算方式，这种方式可以方便地实现等比例缩放。接着，我们使用padding-top属性来设置元素的高度，这里我们使用了75%的比例，实现了4:3的宽高比。

接下来，我们使用position属性来设置元素的位置，top和left属性用于将图片定位在父元素的左上角。width:100%和height:100%用于让图片填满整个元素，并且使用object-fit:cover来保持图片的比例不变。这样我们就可以实现宽高等比例的效果了。

总的来说，CSS3可以帮助我们轻松地实现许多复杂的网页效果。同时，在设置宽度和高度等比例时，我们可以使用padding-top属性和object-fit属性来方便地实现。希望本文可以帮助大家更好地使用CSS3。