object-fit 属性的使用以及在uni-app中使用的细节

原创已于 2023-12-21 14:52:25 修改 · 2.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端

于 2023-11-27 11:44:02 首次发布

css 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了CSSobject-fit属性的不同值（fill,contain,cover,none,scale-down）的作用和示例，以及如何在uni-app中通过mode属性实现类似效果。

object-fit使用以及效果

案例：

1、object-fit:fill;

个人理解：默认的用不用好像都一样。

右边时原图，左边是加了object-fit属性的

2、object-fit:contain;

个人理解：当父容器宽度小于高度时图片宽度铺满图片高度等比例缩放超出则裁剪当父容器宽度大于高度时图片高度铺满宽度等比例缩放超出则裁剪。

3、object-fit:cover;

高度铺满，宽度等比例缩放超出则裁剪

4、object-fit:none;

图片大小不变保留中间部分超出则裁剪。

5、object-fit:scale-down;

图片小于容器时效果跟none一致，图片大于容器时效果跟contain一样。

测试代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.box1{
			width: 400px;
			height: 800px;
			border: solid 3px #000;
			z-index: 100;
			position: relative;
			margin-bottom: 20px;
		}
		.fill{
			width: 100%;
			height: 100%;
			object-fit:fill;
			/*个人理解： 默认的 用不用好像都一样 */
		}
		.contain{
			width: 100%;
			height: 100%;
			object-fit:contain;
			/* 当父容器 宽度 小于高度 时 图片宽度铺满 图片高度等比例缩放 超出则裁剪 当父容器 宽度大于 高度 时 图片高度铺满  宽度等比例缩放 超出则裁剪*/
		}
		.cover{
			width: 100%;
			height: 100%;
			object-fit:cover;
			/* 高度铺满，宽度等比例缩放 超出则裁剪*/
		}
		.none{
			width: 100%;
			height: 100%;
			object-fit:none;
			/*图片大小不变 保留中间部分 超出则裁剪*/
		}
		.scale-down{
			width: 100%;
			height: 100%;
			object-fit:scale-down;
			/*图片小于容器时效果跟none一致，图片大于容器时效果跟contain一样。*/
		}
	</style>
	<body>
		<!-- object-fit:fill; -->
		<div class="box1">
			<img class="fill" src="./456.jpg" alt="" />
		</div>
		<!-- object-fit:contain; -->
		<div class="box1">
			<img class="contain" src="./456.jpg" alt="" />
		</div>
		<!-- object-fit:cover; -->
		<div class="box1">
			<img class="cover" src="./456.jpg" alt="" />
		</div>
		<!-- object-fit:none; -->
		<div class="box1">
			<img class="none" src="./456.jpg" alt="" />
		</div>
		<!-- object-fit:scale-down; -->
		<div class="box1">
			<img class="scale-down" src="./456.jpg" alt="" />
		</div>
		<h2>我是原图</h2>
		<div class="box1">
			<img src="./456.jpg" alt="" />
		</div>
	</body>
</html>

想要在uni-app中实现 object-fit 效果

uni-app 以及微信小程序、有扩展属性在image中加上 mode=""

<image src="./1.png" mode="aspectFill"></image>

根据需求使用相对应的属性即可

object-fit 属性的使用 以及在uni-app中使用的细节

object-fit使用 以及效果

案例：

想要在uni-app中实现 object-fit 效果

object-fit 属性的使用以及在uni-app中使用的细节

object-fit使用以及效果