css实现图片的等比缩放

1. 方法一：object-fit
• object-fit 属性详解
• 实例代码演示
2. 方法 2：max-width 和 max-height
3. 结语

在实际开发过程中， 总是会遇到各种需要处理图片的情况，举个简单的例子， 用户上传头像，我们都知道头像宽高是有一定比例的， 但用户的图片千奇百怪，如果简单的按照我们设定的宽高显示，图片变形不可避免，那么该怎么处理？

方法一：object-fit

object-fit 属性你了解多少呢？下面听我详细介绍下。

object-fit 属性详解

根据MDN（object-fit）的介绍，object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

也就是说盒子固定宽高，图片在这个盒子里面会如何适应。

属性值：

objext-fit:fill | contain | cover | none | scale-down

contain

被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

CSS

.header-container{
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    border-radius: 50%;
    overflow: hidden;
}
.header-container img{
    width: 100%;
    height: 100%;
}

此时效果如下

结语

以上就是今天为大家整理的 css 实现图片的等比缩放的全部内容，小小技巧，为大家提供参考，希望对大家有帮助。