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

最新推荐文章于 2023-12-02 16:15:24 发布

weixin_34096182

最新推荐文章于 2023-12-02 16:15:24 发布

阅读量2.1k

点赞数 1

文章标签： python 前端 javascript ViewUI

原文链接：https://my.oschina.net/u/3549294/blog/1605568

版权

2019独角兽企业重金招聘Python工程师标准>>>

实际图：600px*500px

效果图：

代码：

<!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>

总结：

主要代码：

background-size: cover;

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

转载于:https://my.oschina.net/u/3549294/blog/1605568