简介

本篇文章主要讲解object-fit实现图片的自适应,我们web或手机端布局的时候常遇到不规则图片的时候,如果限制宽度高度布局就会发现图片会变形，接下来我们来讲解一下用法。

思路整理

我们碰到不规则图片或logo排版情况,比如logo大小不一样,切出来的图片尺寸更是不规则,之前的做法是,给图片外层加个div设置,固定宽高比例,居中,然后给图片加宽高100%,加最大跟最小宽高限制,这种做法比较麻烦.

第一种办法-传统布局

html代码

<ul class="brands">
	<li class="brands-item">
		<a href="#">
			<img src="img/logo01.png" alt="">
		</a>
	</li>
	<li class="brands-item">
		<a href="#">
			<img src="img/logo02.png" alt="">
		</a>
	</li>
	<li class="brands-item">
		<a href="#">
			<img src="img/logo03.png" alt="">
		</a>
	</li>
	<li class="brands-item">
		<a href="#">
			<img src="img/logo04.png" alt="">
		</a>
	</li>
</ul>

样式代码

.brands {
	width: 800px;
	margin: 30px auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	grid-gap: 1rem;
}
.brands-item {
	padding: 20px 0;
	background: #eee;
}
.brands-item a {
	display: block;
	width: 90px;
	height: 50px;
	text-align: center;
	margin: auto;
}
.brands-item img {
	max-width: 100%;
	max-height: 100%;
}

效果展示

第二种方法---object-fit布局

与前面第一种传统方法相比,object-fit布局显然比较方便得多了,下面是object-fit布局使用代码.

样式代码

.brands-item a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.brands-item img {
	width: 90px;
	height: 50px;
	object-fit: contain;
	mix-blend-mode: multiply;  /*混合模式删除白色背景*/
}

主要是加了该样式object-fit: contain;就是保持原有尺寸比例,容被缩放.指定元素的内容应该如何去适应指定容器的高度与宽度. 该属性来源解析可查看.

是不是觉得这样更方便的布局了,用这个方法,图片会自动缩放比例,不用担心缩放之后还要居中.

兼容性如下:

如果不需要考虑兼容情况下可以使用,比如web端如果要考虑ie兼容,那建议还是使用第一种方式布局吧.

最后总结

在本节中,结合自己之前的布局经验,第一种方式比较常用在web端布局,因为要考虑ie兼容.h5布局可以考虑一下第二种方式布局,还是比较方便的.这个是我之前布局遇到的小问题分享给大家,也希望本文能对大家有所帮助.谢谢~~

css不规则不定宽高图片自适应object-fit使用跟传统区别

简介

思路整理

第一种办法-传统布局

第二种方法---object-fit布局

最后总结