一张图搞定object-fit

最新推荐文章于 2022-06-20 13:06:02 发布

trayvontang

最新推荐文章于 2022-06-20 13:06:02 发布

阅读量139

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/trayvontang/article/details/106710501

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

object-fit

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>object-fit</title>
	</head>
	<style>
		.fill {
			object-fit: fill;
		}

		.contain {
			object-fit: contain;
		}

		.cover {
			object-fit: cover;
		}

		.none {
			object-fit: none;
		}

		.scale-down {
			object-fit: scale-down;
		}
		
		#wrapper{
			width: 60%;
			margin: 3.125rem auto;
		}

		#small img {
			width: 100px;
			height: 100px;
			background: blue;
			border: 1px solid red;
			margin-top: 1.25rem;
		}

		#large img {
			width: 200px;
			height: 200px;
			background: blue;
			border: 1px solid red;
		}
		#small{
			display: flex;
			justify-content: space-around;
		}
		#large{
			display: flex;
			justify-content: space-around;
			margin-top: 1.25rem;
		}
		.item{
			display: flex;
			flex-direction: column;
			text-align: center;
			
		}
		
		
	</style>
	<body>
		<div id="wrapper">		
			<img src="img/bgg.jpg" style="border: 1px solid red;"/>原图(104*144)
			<div id="small">
				<div class="item">
					<img class="fill" src="img/bgg.jpg" />
					<sapn>fill</span>
				</div>
				<div class="item">
					<img class="contain" src="img/bgg.jpg" />
					<sapn>contain</span>
				</div>
				<div class="item">
					<img class="cover" src="img/bgg.jpg" />
					<sapn>cover</span>
				</div>
				<div class="item">
					<img class="none" src="img/bgg.jpg" />
					<sapn>none</span>
				</div>
				<div class="item">
					<img class="scale-down" src="img/bgg.jpg" />
					<sapn>scale-down</span>
				</div>
			</div>

			<div id="large">
				<div class="item">
					<img class="fill" src="img/bgg.jpg" />
					<sapn>fill</span>
				</div>
				<div class="item">
					<img class="contain" src="img/bgg.jpg" />
					<sapn>contain</span>
				</div>
				<div class="item">
					<img class="cover" src="img/bgg.jpg" />
					<sapn>cover</span>
				</div>
				<div class="item">
					<img class="none" src="img/bgg.jpg" />
					<sapn>none</span>
				</div>
				<div class="item">
					<img class="scale-down" src="img/bgg.jpg" />
					<sapn>scale-down</span>
				</div>
			</div>
		</div>
	</body>
</html>

trayvontang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一张图搞定object-fit

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>object-fit</title> </head> <style> .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: c.
复制链接

扫一扫

专栏目录