【iCSS：布局】使用object-fit规定图像尺寸

icss-object-fit.markdown

【iCSS：布局】使用object-fit规定图像尺寸

A Pen by JowayYoung on CodePen.

License.

index.html

<div class="bruce flex-ct-y">
	<h1>我家乖狗狗：AB</h1>
	<ul class="image-size">
		<li>
			<h3>Cover</h3>
			<img src="https://yangzw.vip/static/codepen/ab-1.jpg" class="cover">
		</li>
		<li>
			<h3>Contain</h3>
			<img src="https://yangzw.vip/static/codepen/ab-1.jpg" class="contain">
		</li>
		<li>
			<h3>Fill</h3>
			<img src="https://yangzw.vip/static/codepen/ab-2.jpg" class="fill">
		</li>
		<li>
			<h3>ScaleDown</h3>
			<img src="https://yangzw.vip/static/codepen/ab-2.jpg" class="scale-down">
		</li>
	</ul>
</div>

style.scss

h1 {
	line-height: 50px;
	font-weight: bold;
	font-size: 30px;
	color: #f66;
}
.image-size {
	display: flex;
	justify-content: space-between;
	width: 1000px;
	height: 300px;
	li {
		width: 200px;
	}
	h3 {
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
	}
	img {
		width: 100%;
		height: 260px;
		background-color: #3c9;
		&.cover {
			object-fit: cover;
		}
		&.contain {
			object-fit: contain;
		}
		&.fill {
			object-fit: fill;
		}
		&.scale-down {
			object-fit: scale-down;
		}
	}
}

styles

<link href="https://yangzw.vip/static/css/reset.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/main.css" rel="stylesheet" />
<link href="https://yangzw.vip/static/css/theme.scss" rel="stylesheet" />