图片居中
2018-01-09 本文已影响0人
Lulus
思路
借助div的background-size 的 cover这个属性等比例缩放图片
配合center就可以实现居中覆盖,裁剪多余
最终实现：等比例缩放+居中+完全覆盖+边界裁剪
div.full-img{
background-size: cover;
background: url("http://img4.duitang.com/uploads/item/201310/14/20131014172031_4sUms.jpeg") no-repeat center center;
width: 80vw;
height: 80vw;
}
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
@keyframes rainbow {
0% {
background: steelblue;
}
100% {
background: yellowgreen;
}
}
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.full-screen {
width: 100%;
height: 100%;
background: grey;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
div.center:hover {
animation: 1s cubic-bezier(0.215, 0.610, 0.355, 1) rainbow infinite alternate-reverse forwards;
}
.large {
height: 10rem;
width: 10rem;
background: ghostwhite;
}
a,
a:link,
a:visited {
color: #444;
text-decoration: none;
transition: all 800ms cubic-bezier(0.215, 0.610, 0.355, 1)
}
.center:hover {
color: blanchedalmond;
}
.center::before {
position: absolute;
content: "\5B";
left: 0rem;
opacity: 0;
}
.center:hover::before {
position: absolute;
content: "\5B";
left: -1rem;
opacity: 1;
transition: all 800ms cubic-bezier(0.215, 0.610, 0.355, 1)
}
.center::after {
position: absolute;
content: "\5d";
right: 0rem;
opacity: 0;
}
.center:hover::after {
position: absolute;
content: "\5D";
right: -1rem;
opacity: 1;
transition: all 800ms cubic-bezier(0.215, 0.610, 0.355, 1)
}
div.full-img{
background-size: cover;
background: url("http://img4.duitang.com/uploads/item/201310/14/20131014172031_4sUms.jpeg") no-repeat center center;
width: 80vw;
height: 80vw;
}
</style>
<div class="full-screen">
<div class="center full-img">
</div>
</div>
</body>
</html>
