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

相關標籤/搜索