首页 > css >

css:object-fit实现图片等比例缩放,按比例缩放,在父元素中居中显示

时间: 作者:admin 浏览:

其实关于图片等比例缩放的方法,之前已经尝试过css方法的object-fit了,但没实现到,所以选择了使用js来实现,于是前面就写了这篇文章:

vue图片按比例缩放,等比例缩放,在父节点中居中显示

今天看了资料发现object-fit其实是可以实现我想要的效果;

语法:

object-fit: fill | contain | cover | scale-down | none | initial | inherit;

属性值:

描述
fill 默认,不保证保持原有的比例,内容拉伸填充整个内容容器。
contain 保持原有尺寸比例,内容被缩放。
cover 保持原有尺寸比例,但部分内容可能被剪切。
scale-down
保持原有尺寸比例,内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。
none 保留原有元素内容的长度和宽度,也就是说内容不会被重置。
initial 设置为默认值。
inherit 从该元素的父元素继承属性。

之前没实现图片等比例缩放并且居中显示,是因为没设置width与height值,想要图片在父元素中等比例自适应,只需将图片的width和height都设置为100%即可,下面就是图片等比例缩放并且居中显示的例子:

示例:

1、object-fit: cover | 保持原有尺寸比例,缩放至铺满父元素,但超出内容被剪切掉。

<div class="box">
    <img class="img" src="./picture.jpg" alt="" />
</div>
.box {
    width:300px;
    height:400px;
    margin:0 auto;
    overflow: hidden;
}
.img {
    width:100%;
    height: 100%;
    object-fit: cover;
}

原图尺寸:901 x 503 px

2、contain | 保持原有尺寸比例,内容被缩放至全部可见。

<div class="box">
    <img class="img" src="./picture2.jpg" alt="" />
</div>
.box {
    width:600px;
    height:300px;
    margin:0 auto;
    overflow: hidden;
}
.img {
    width:100%;
    height: 100%;
    object-fit: contain;
}

原图比例:508 x 668 px

剩下的属性就不一一举例了,大家可以自己多试试感受下。

另外,object-fit搭配object-position一起使用,就更加完美了,后续再写关于object-position的篇章;

前端新手交流群
欢迎加入web前端新手交流qq群:
734802480(已满)、 794324979

更多文章

栏目文章


Copyright © 2014-2022 seozhijia.net 版权所有-粤ICP备13087626号-4