css实现图片的等比缩放

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

方法一：object-fit

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

object-fit 属性详解

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

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

属性值：

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

contain

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

可以看到上面图片中左右两边的就是所谓的黑边， 因为它的宽高比与框的不一致。

cover

被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。

也就是说， 在宽高比不一致时，cover 属性值会进行裁剪，以此来适应容器。

就像这样：

fill

被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。

fill 属性与 cover 属性值类似，都会完全填充内容框， 不同的是「fill 属性值会拉伸元素来适应容器」

如下图， 高度被拉伸:

none

被替换的内容将保持其原有的尺寸。

scale-down

内容的尺寸与none或contain中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

大概就是取决于 none 和 contain 的最小值， 这个属性不怎么用到。

实例代码演示

HTML

<div class='header-container'>
     <img src="./test.jpg" alt="">
</div>
<img src="./test.jpg" alt="" style='height: 100px;'>

CSS

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

此时效果如下

不难看出， 上面的头像对比下面的原图，高度被拉伸了， 那么此时只需要给img添加一个属性object-fit: cover;

效果如下：

方法 2：max-width 和 max-height

我们可以设置max-width和max-height来限制图片的最大值，一般是设置为外层容器的100%；这样图片就会等比缩放，且不会变形。

结语

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