前端居中截取不同形状的图片

开发的时候拿到这样一个需求:
前端居中截取不同形状的图片_第1张图片
意思就是要居中截取图片,这个功能跟微信朋友圈的九宫格显示功能差不多的效果。

方案一

用样式居中,这种方案适合紧急情况下的临时方案

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
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

你可能感兴趣的:(js,前端,canva可画)