一般的社交项目都会有图片功能,特别是多图的情况下,九张图布局最常见也用的最多的就是[九宫格]^(CELL)布局了,但是在前端写代码的时候就很麻烦了,因为你不知道客户选择的图片是多大还是多小的情况下,你是不可以设置高度,这样的设置会导致拉伸图片,变形。所以我们需要换一种思路来做,利用css的 background-image 属性来完成下面的步骤。
这样的好处 :

可以自适应图片的宽高
可以设置图片显示的区域,是显示中间部分或者图片上面或者下部分
不需要 img 标签即可完成代码
废话不多说看下代码


<div class="wrapper clearfix">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>

先写好布局骨架代码,接下来写上css


.wrapper {
    margin: 0 auto;
    width: 100%;
    max-width: 380px;
    user-select: none;
    margin-left: -4px;
}
.wrapper.clearfix:after {  /* 去除浮动 */
    clear: both; 
    content: "."; 
    display: block;
    height: 0; 
    visibility: hidden;
}
.wrapper.clearfix {
    zoom:1;
}
.list {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
    position: relative;
     float: left;
    width: calc(33.333333% - 4px);
    padding-top: calc(33.333333% - 4px);
    margin-left: 4px;
        background-image: url('你自己的图片地址')
}
.list:not(:last-child) {
    margin-bottom: 4px;
}

这样的你图片不管怎么做都是正方行,利用 padding-top 属性设置一样的高度,一气呵成。

- THE END -

#微信,#九宫格 # 1,310 阅读
分享到:
Like

目录

    评论 (0)

    • 昵称
    • 邮箱
    • 网址

    🙋🏻‍♂️ 这里是我的个人站点,我在这里记录关于产品、设计、前端相关的内容,欢迎关注!

    联系我

    菜单

    热门文章

    最新评论

    宇宙超级无敌美少女梦梦的头像 水无心的头像 luss的头像 关山映月的头像 若志奕鑫的头像 yangyuji的头像 米斯特宫的头像 哥斯拉的头像 wu先生的头像 阿锋的头像 鸟叔的头像 娇娇的头像 HEYHUA的头像 真z的头像