css实现图片的等比缩放

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

方法一:object-fit

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

object-fit属性详解

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

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

属性值:

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

contain

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

contain

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

cover

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

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

就像这样:

cover

fill

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

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

如下图, 高度被拉伸:

fill属性

none

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

scale-down

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

大概就是取决于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%;
}

此时效果如下

css实现图片的等比缩放

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

效果如下:

给img添加一个属性object-fit: cover;

方法2:max-width和max-height

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

max-width和 max-height

结语

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » css实现图片的等比缩放

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们