css 设置宽高比例 |css 设置图片左右居中显示

在CSS中，设置宽高比例通常就涉及到两个属性：width和height。其中，width用来设置元素的宽度，height用来设置元素的高度。但是，使用这两个属性单独设置宽高比例会比较麻烦，在很多时候都需要使用其他的技巧来实现。

在这里，大家介绍两种比较通用的设置宽高比例的方法，分别是使用padding和使用伪元素。

.ratio {
position: relative;
width: 100%;
padding-bottom: 56.25%;
/* 16:9 的视频比例 */
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

第一种方法就是使用padding属性，这个属性是用来指定元素的内边距，不过大家可以利用它的百分比值来实现宽高比例。具体地，大家在元素的父级容器上设置padding-bottom比例值，比如16:9视频比例就是padding-bottom:56.25%，这样一来父级容器就会保持16:9的比例，然后再将视频元素放到父级容器内并且使用绝对定位，宽高为100%即可。这样一来视频元素就可以准确地填满父级容器，而宽高比例也得以保持。

.ratio::before {
content: "";
display: block;
padding-bottom: 56.25%;
/* 16:9 的视频比例 */
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

第二种方法是使用伪元素，大家可以通过在父级容器上创建一个伪元素来设置宽高比例。具体地，大家在父级容器上设置：before伪元素，并且将该元素的padding-bottom设置为宽高比例的比例值，然后再将视频元素放到父级容器内并且使用绝对定位，宽高为100%即可。这样一来伪元素也会根据比例值来保持16:9的比例，视频元素同样也可以准确地填满父级容器，而宽高比例也得以保持。