一张图搞定object-fit

一张图搞定object-fit_第1张图片


<html>
	<head>
		<meta charset="utf-8">
		<title>object-fittitle>
	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>fillspan>
				div>
				<div class="item">
					<img class="contain" src="img/bgg.jpg" />
					<sapn>containspan>
				div>
				<div class="item">
					<img class="cover" src="img/bgg.jpg" />
					<sapn>coverspan>
				div>
				<div class="item">
					<img class="none" src="img/bgg.jpg" />
					<sapn>nonespan>
				div>
				<div class="item">
					<img class="scale-down" src="img/bgg.jpg" />
					<sapn>scale-downspan>
				div>
			div>

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


你可能感兴趣的:(前端)