css控制长方形图片在正方形区域显示，且不变形

时间 2019-11-25

原文原文链接

方法一：利用新属性：html

object-fit: cover;

方法二：利用背景图url

实际图：600px*500pxspa

效果图：code

代码：htm

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	* {
		margin: 0px;
		padding: 0px;
	}

	ul,
	li {
		list-style-type: none;
	}

	.box {
		width: 1200px;
		margin: 30px auto;
		display: table;
	}

	.list li {
		position: relative;
		float: left;
		width: 300px;
		height: 300px;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
	}

	.list li:before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		border: 1px solid red;
	}

</style>

<body>
	<div class="box">
		<ul class='list'>
			<li style="background-image: url(timg.jpeg)"></li>
			<li style="background-image: url(timg.jpeg)"></li>
			<li style="background-image: url(timg.jpeg)"></li>
			<li style="background-image: url(timg.jpeg)"></li>
		</ul>
	</div>
</body>

</html>

总结：it

主要代码：io

background-size: cover;table

background-repeat: no-repeat;
background-position: center center;class