仿朋友圈九宫格，不同尺寸图片正方形缩略展示

仿微信九宫格朋友圈图片，无论是很宽的图，还是很长的图，都能正方形显示图片中间部分，不需要上传图片时生成另外的正方形缩略图。不同大小的设备，正方形可以自适应。图示如下：

宽图展示
长图展示

最终效果

效果查看

对比下朋友圈

朋友圈

方法一：background

html:

<div id="app"></div>

css:

.content{
  margin:20px;
}
.item{
   width: 100%;
   height: 0;
   margin:0 0 4px 0;
   padding-bottom: 100%;
}

js:

const { Row, Col } = antd;
class App extends React.Component {
    state = {
        data: [{
            bgImgUrl: "http://img.itguliang.com/static/images/f1da163e-2.png?v=20181010"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/f1da163e-2.png?v=20181010"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/f1da163e-2.png?v=20181010"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/d1a3bf90-5.png"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/d1a3bf90-5.png"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/d1a3bf90-5.png"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/f1da163e-2.png?v=20181010"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/f1da163e-2.png?v=20181010"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/f1da163e-2.png?v=20181010"
        }],
    }

    render() {
        let listItems = this.state.data.map((item, index) => {
            return (
                <Col span={8} key={index}>
                    <div className="item" style={{ background: 'url(' + item.bgImgUrl + ') center no-repeat', backgroundSize: "cover" }}
                    ></div>
                </Col>
            )
        });
        return (
            <div className="content">
                <Row gutter={24}>
                    <Col span={8} >
                        宽图原图：<br />
                        <img width="210" src="http://img.itguliang.com/static/images/f1da163e-2.png?v=20181010" />
                        <br /><br />
                        长图原图：<br />
                        <img height="200" src="http://img.itguliang.com/static/images/d1a3bf90-5.png" />
                    </Col>
                    <Col span={16} >
                        <Row gutter={8} className="content">
                            {listItems}
                        </Row>
                    </Col>
                </Row>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('app'),
);

demo地址：https://codepen.io/itguliang-the-selector/pen/xxKORYM
图片地址加载失败显示默认图片，可用背景图多图解决。

方法二：img object-fit: cover

html:

<div id="app"></div>

css:

.content{
  margin:20px;
}
.left-img{
  max-width:100%;
}
.item2{
   position: relative;
   width: 100%;
   margin:0 0 8px 0;
}
.item2:after {
   content: "";
   display: block;
   padding-bottom: 100%;
}
.item2 img {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

js:

const { Row, Col } = antd;
class App extends React.Component {
    state = {
        data: [{
            bgImgUrl: "http://img.itguliang.com/static/images/f1da163e-2.png?v=20181010"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/f1da163e-2.png?v=20181010"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/f1da163e-2.png?v=20181010"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/d1a3bf90-5.png"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/d1a3bf90-5.png"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/d1a3bf90-5.png"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/f1da163e-2.png?v=20181010"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/f1da163e-2.png?v=20181010"
        }, {
            bgImgUrl: "http://img.itguliang.com/static/images/f1da163e-2.png?v=20181010"
        }],
    }

    render() {
      let listItems2 = this.state.data.map((item, index) => {
            return (
                <Col span={8} key={index}>
                    <div className="item2">
                      <img src={item.bgImgUrl} />
                    </div>
                </Col>
            )
        });
        return (
            <div className="content">
                <Row gutter={24}>
                    <Col span={12} >
                        宽图原图：<br />
                        <img className="left-img" src="http://img.itguliang.com/static/images/f1da163e-2.png?v=20181010" />
                        <br /><br />
                        长图原图：<br />
                        <img className="left-img"src="http://img.itguliang.com/static/images/d1a3bf90-5.png" />
                    </Col>
                    <Col span={12} >
                        img object-fit: cover方式：<br />
                        <Row gutter={8} className="content">
                            {listItems2}
                        </Row>
                    </Col>
                </Row>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('app'),
);

demo地址：https://codepen.io/itguliang-the-selector/pen/xxKORYM
图片地址加载失败显示默认图片，可用背景图多图解决。

原创文章，如需转载请注明出处，谢谢！