最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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实现图片的等比缩放的全部内容,小小技巧,为大家提供参考,希望对大家有帮助。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » css实现图片的等比缩放

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发