思路
借助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>
转载于:https://www.cnblogs.com/Lulus/p/8252828.html
