CSS图片居中显示不变形，只显示中间部分，图片上的文字居中显示

2021-03-05 09:31:12 阅读：182 来源： 互联网

标签：居中显示 center 缩放 cover 100px background 图片

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{
				width:100px;
				height:100px;
				position:relative;
				top:100px;
				left:100px;
				background-image: url('./img/test.jpg');
				background-size:cover;
				background-repeat: no-repeat;
				background-position:center center;
				text-align:center;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<h5>Hello World!</h5>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述
图片原图如下：

可以看到，图片只是显示了中间的部分

注意：background-size 这个属性的两个值：cover和contain
cover: 保持图像的纵横比 , 并将图像缩放成将完全覆盖背景定位区域的最小大小 ,即让图片填充满父节点，超出部分隐藏，仅显示中间
contain: 保持图像的纵横比，并将图像缩放成将适合背景定位区域的最大大小 ，即让图片根据父节点宽高等比例缩放。

标签：居中,显示,center,缩放,cover,100px,background,图片
来源： https://blog.csdn.net/weixin_43535265/article/details/114382703

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS图片居中显示不变形，只显示中间部分，图片上的文字居中显示