css3图片等比例放大 |用户信息布局css

img {
width: 100%; /* 设置图片的宽度为100% */
height: 100%; /* 设置图片的高度为100% */
object-fit: cover; /* 按比例放大图片，并将图片居中 */
}

通过上述代码，大家可以将图片设置为与其父元素同样大小，并按比例缩放图片，使其完美适应不同的屏幕尺寸。

除了cover之外，还有其他几种属性可以使用。比如contain可以缩放图片以适应其父元素的大小，并水平和垂直居中图片。而fill会将图片填充到其父元素中，可能会导致图片的部分被裁剪。最后，none将保留图片原始大小。

img {
width: 100%; /* 设置图片的宽度为100% */
height: 100%; /* 设置图片的高度为100% */
object-fit: contain; /* 缩放图片适应父元素，并居中 */
}

无论是哪种属性，都可以根据不同的需求进行选择。CSS3的object-fit属性为大家带来了更好的图片处理方法，更加方便的制作响应式网站和应用。