开发的时候拿到这样一个需求:
意思就是要居中截取图片,这个功能跟微信朋友圈的九宫格显示功能差不多的效果。
方案一
用样式居中,这种方案适合紧急情况下的临时方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.bg{
display: flex;
}
.bg1{
width: 400px;
height: 700px;
margin-left: 10px;
background: url(换成图片地址) no-repeat ;
background-size: cover;
}
.bg2{
width: 300px;
height: 300px;
margin-left: 10px;
background:url(换成图片地址) center center no-repeat;
background-size: cover;
}
</style>
<body >
<div class="bg">
<div class="bg1">
</div