CSS处理图片渲染时拉伸和挤压变形

最新推荐文章于 2024-04-25 22:42:04 发布

梦起，不止关注技术

最新推荐文章于 2024-04-25 22:42:04 发布

阅读量2k

点赞数 3

分类专栏：休闲demo 文章标签： css html

本文链接：https://blog.csdn.net/qq_41585377/article/details/102483167

版权

休闲demo 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS解决图片渲染时拉伸和挤压变形的方法

背景：商品循环出来需要在固定大小里面，但是商品图片大小商家上传时没有规定图片比例，如果写死图片大小会导致图片渲染是拉伸和挤压变形
思路：给图片一个父级容器，父容器给定固定大小，图片限定最大宽度与最小宽度不超过父容器
如：

	<style type="text/css">
		.bigBox{
			display: flex;
		}
		.imgBox{
			width:200px;
			height:200px;
			margin-right: 10px;
			background-color: pink;
		}
		.imgBox>img{
			max-width:100%;
			max-height: 100%;
		}
	</style>
	<body>
		<div class="bigBox">
			<div class="imgBox"><img src="img/1.jpg" alt=""></div>
			<div class="imgBox"><img src="img/2.jpg" alt=""></div>
			<div class="imgBox"><img src="img/3.jpg" alt=""></div>
			<div class="imgBox"><img src="img/4.jpg" alt=""></div>
			<div class="imgBox"><img src="img/apple.jpg" alt=""></div>
		</div>
	</body>

但是图片比例不同会导致留白不同，很不美观逼死强迫症。
示例图1
然后为了让他更美观，想了一下，决定让图片在父容器中居中显示。
代码如下：

<style type="text/css">
		.bigBox{
			display: flex;
		}
		.imgBox{
			display: flex;
			justify-content: center;
			align-items: center;
			width:200px;
			height:200px;
			margin-right: 10px;
			background-color: pink;
		}
		.imgBox>img{
			max-width:100%;
			max-height: 100%;
		}
	</style>
	<body>
		<div class="bigBox">
			<div class="imgBox"><img src="img/1.jpg" alt=""></div>
			<div class="imgBox"><img src="img/2.jpg" alt=""></div>
			<div class="imgBox"><img src="img/3.jpg" alt=""></div>
			<div class="imgBox"><img src="img/4.jpg" alt=""></div>
			<div class="imgBox"><img src="img/apple.jpg" alt=""></div>
		</div>
	</body>

示例二
这样是不是就好很多了呢。
总结：处理图片渲染是拉伸和挤压变形的主要代码就是给图片一个定死宽高的父容器，把父容器变为弹性盒子，让图片在父容器下居中，最大宽度与高度不超过父容器。
新方法：

<style>
.bigBox{
	display: flex;
}
.imgBox{
	width:200px;
	height:200px;
	margin-right: 10px;
	background-color: pink;
}
.imgBox>img{
	width:100%;
	height: 100%;
	object-fit:contain;
}
</style>

新方法比之前的方法更简单。

梦起，不止关注技术

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS处理图片渲染时拉伸和挤压变形

CSS解决图片渲染时拉伸和挤压变形的方法背景：商品循环出来需要在固定大小里面，但是商品图片大小商家上传时没有规定图片比例，如果写死图片大小会导致图片渲染是拉伸和挤压变形思路：给图片一个父级容器，父容器给定固定大小，图片限定最大宽度与最小宽度不超过父容器如： <style type="text/css"> .bigBox{ display: flex; } .i...
复制链接

扫一扫