设为首页收藏本站
切换风格
立即注册 找回密码

QQ登录

只需要一步，快速开始

APP扫码登录

只需要一步，快速开始

手机号码，快捷登录

泡泡马甲

快捷导航
  • 优惠福利
  • 美食天下
  • 旅游户外
  • 亲子乐园
  • 编程源码
  • 金典软件
  • 视频教学
  • 文档资料
  • 修改头像
  • 我的积分
  • 修改密码
  • 个人资料
  • 推广奖励
  • 改用户名
    • 泡泡马甲APP 更多内容请下载泡泡马甲手机客户端APP 立即下载 ×
    泡泡马甲»泡泡马甲 › 分类导航 › 编程源码 › 用CSS Grid实现响应式图片布局的效果
    返回列表 发新帖
    查看: 2002|回复: 0

    [HTML/CSS/JS] 用CSS Grid实现响应式图片布局的效果

    [复制链接]
    admin

    等级头衔

    积分成就    金币 : 2802
       泡泡 : 1516
       精华 : 6 篇
       在线时间 : 1242 小时
       最后登录 : 2024-4-18

    丰功伟绩

    优秀达人突出贡献荣誉管理论坛元老

    联系方式
    发表于 2021-7-5 09:23:41 | 显示全部楼层 |阅读模式
    ⏹ 阅读停止中
    一、实例效果  l; U0 D* E1 }0 i  M& O- X# R
    PC端预览的效果：* @. [$ f/ ]1 s( @. G; K9 W
    1.jpg
    5 t7 m% {/ u# M3 Q* J% V6 Q* j移动端的效果：
    ! L$ v( T: N4 o9 Y 2.jpg
    ) n# v! V5 R0 |# X% x  x二、要点解析
    ) r& K7 Z7 Y: B4 A# d7 X
    • 采用display: grid创建一个合适的响应网格布局。
    • 将样式包装到媒体查询中，以适应于小尺寸屏幕。
      : |. W3 e( T4 L
    三、案例代码! h4 b5 o* }7 C) v) F
    HTML代码：
    5 f6 l/ E& m. M% r4 d/ X 
    1. <div class="image-mosaic">

    2.   <div class="card card-tall card-wide" style="background-image: url('http://www.webqdkf.com/skin/default/images/gksj-09.jpg')">

    3.   </div>

    4.   <div class="card card-tall" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/e1edfa3a0786f4df7c442a1895522109.jpg')">

    5.   </div>

    6.   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/e2ab18d0d9ef27d2e2f6f589c501e25b.jpg')">

    7.   </div>

    8.   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/1755875dfb05ec8dc263be2f56d124e5.jpg')">

    9.   </div>

    10.   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/859ecf02e0f70819ba71d5fee8f72f12.jpg')">

    11.   </div>

    12.   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/21903f3245940092303fd5a519f813a2.jpg')">

    13.   </div>

    14.   <div class="card card-wide" style="background-image: url('http://www.webqdkf.com/skin/default/images/banner03-873-390.jpg')">

    15.   </div>

    16.   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/0d3c66ece10207b0d1dca9118560e16d.jpg')">

    17.   </div>

    18.   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/63fb35a52cd8f01b68d78aa0b6c5b021.jpg')">

    19.   </div>

    20.    <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/63fb35a52cd8f01b68d78aa0b6c5b021.jpg')">

    21.    </div>

    22.   <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/e973c393fd7fda278977fb2ff686fdc9.jpg')">

    23.   </div>

    24.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/52d11e4aef71cdb14d95cded9ffc3bf8.jpg')">

    25.   </div>

    26.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/08-31/a03f0b9879a5361ba0a5519cbe1dbac1.jpg')">

    27.   </div>

    28.   <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-16/5ac65c5c5d7ead056d8ac2767b5648e1.jpg')">

    29.   </div>

    30.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-09/b45e91e2b7c53f658f85f9d76f89aa77.jpg')">

    31.   </div>

    32.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-08/186d506c004efa7896fa634e5139b6dc.jpg')">

    33.   </div>

    34.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-09/f731e58e9bf7ee4c5b5b2a85e5dd2cbf.jpg')">

    35.   </div>

    36.    <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2020/09-11/c0f179887b1f9efa98c4af944e8d699b.jpg')">

    37.   </div>

    38.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/052746e2767ffb56e045a5e7017ccec9.jpg')">

    39.   </div>

    40.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-05/ede4d9983eefd8f88bf03eb966bceb5c.jpg')">

    41.   </div>

    42.   <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-05/2383cd70ff6d2f15350d64b0af572821.jpg')">

    43.   </div>

    44.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-24/1442b8adc1f03141eb66e844e069caa8.jpg')">

    45.   </div>

    46.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/0d3c66ece10207b0d1dca9118560e16d.jpg')">

    47.   </div>

    48.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/052746e2767ffb56e045a5e7017ccec9.jpg')">

    49.   </div>

    50. </div>
    CSS代码：
    ) b, i, a9 A! z) v0 ?  n' ]' M
    1. .image-mosaic {

    2.   display: grid;

    3.   gap: 1rem;

    4.   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    5.   grid-auto-rows: 240px;

    6. }

    7. 

    8.     .card {

    9.   display: flex;

    10.   flex-direction: column;

    11.   justify-content: center;

    12.   align-items: center;

    13.   background: #353535;

    14.   font-size: 3rem;

    15.   color: #fff;

    16.   box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;

    17.   height: 100%;

    18.   width: 100%;

    19.   border-radius: 4px;

    20.   transition: all 500ms;

    21.   overflow: hidden;

    22.   background-size: cover;

    23.   background-position: center;

    24.   background-repeat: no-repeat;

    25.   padding: 0;

    26.   margin: 0;

    27. }

    28. 

    29. @media screen and (min-width: 600px) {

    30.   .card-tall {

    31.     grid-row: span 2 / auto;

    32.   }

    33. 

    34.   .card-wide {

    35.     grid-column: span 2 / auto;

    36.   }

    37. }
    完整代码：% J- m! C& Z0 s% J! I
    1. 

    2. <html>

    3. <head>

    4.    <style type="text/css">

    5.    .image-mosaic {

    6.   display: grid;

    7.   gap: 1rem;

    8.   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    9.   grid-auto-rows: 240px;

    10. }

    11. 

    12.     .card {

    13.   display: flex;

    14.   flex-direction: column;

    15.   justify-content: center;

    16.   align-items: center;

    17.   background: #353535;

    18.   font-size: 3rem;

    19.   color: #fff;

    20.   box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;

    21.   height: 100%;

    22.   width: 100%;

    23.   border-radius: 4px;

    24.   transition: all 500ms;

    25.   overflow: hidden;

    26.   background-size: cover;

    27.   background-position: center;

    28.   background-repeat: no-repeat;

    29.   padding: 0;

    30.   margin: 0;

    31. }

    32. 

    33. @media screen and (min-width: 600px) {

    34.   .card-tall {

    35.     grid-row: span 2 / auto;

    36.   }

    37. 

    38.   .card-wide {

    39.     grid-column: span 2 / auto;

    40.   }

    41. }

    42. </style>

    43. </head>

    44. <body>

    45.   <div class="image-mosaic">

    46.   <div class="card card-tall card-wide" style="background-image: url('http://www.webqdkf.com/skin/default/images/gksj-09.jpg')">

    47.   </div>

    48.   <div class="card card-tall" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/e1edfa3a0786f4df7c442a1895522109.jpg')">

    49.   </div>

    50.   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/e2ab18d0d9ef27d2e2f6f589c501e25b.jpg')">

    51.   </div>

    52.   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/1755875dfb05ec8dc263be2f56d124e5.jpg')">

    53.   </div>

    54.   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/859ecf02e0f70819ba71d5fee8f72f12.jpg')">

    55.   </div>

    56.   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/21903f3245940092303fd5a519f813a2.jpg')">

    57.   </div>

    58.   <div class="card card-wide" style="background-image: url('http://www.webqdkf.com/skin/default/images/banner03-873-390.jpg')">

    59.   </div>

    60.   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/0d3c66ece10207b0d1dca9118560e16d.jpg')">

    61.   </div>

    62.   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/63fb35a52cd8f01b68d78aa0b6c5b021.jpg')">

    63.   </div>

    64.    <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/63fb35a52cd8f01b68d78aa0b6c5b021.jpg')">

    65.    </div>

    66.   <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/e973c393fd7fda278977fb2ff686fdc9.jpg')">

    67.   </div>

    68.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/52d11e4aef71cdb14d95cded9ffc3bf8.jpg')">

    69.   </div>

    70.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/08-31/a03f0b9879a5361ba0a5519cbe1dbac1.jpg')">

    71.   </div>

    72.   <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-16/5ac65c5c5d7ead056d8ac2767b5648e1.jpg')">

    73.   </div>

    74.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-09/b45e91e2b7c53f658f85f9d76f89aa77.jpg')">

    75.   </div>

    76.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-08/186d506c004efa7896fa634e5139b6dc.jpg')">

    77.   </div>

    78.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-09/f731e58e9bf7ee4c5b5b2a85e5dd2cbf.jpg')">

    79.   </div>

    80.    <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2020/09-11/c0f179887b1f9efa98c4af944e8d699b.jpg')">

    81.   </div>

    82.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/052746e2767ffb56e045a5e7017ccec9.jpg')">

    83.   </div>

    84.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-05/ede4d9983eefd8f88bf03eb966bceb5c.jpg')">

    85.   </div>

    86.   <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-05/2383cd70ff6d2f15350d64b0af572821.jpg')">

    87.   </div>

    88.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-24/1442b8adc1f03141eb66e844e069caa8.jpg')">

    89.   </div>

    90.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/0d3c66ece10207b0d1dca9118560e16d.jpg')">

    91.   </div>

    92.   <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/052746e2767ffb56e045a5e7017ccec9.jpg')">

    93.   </div>

    94. </div>

    95. </body>

    96. </html>
    响应, 布局, 样式, 适应, 尺寸

    相关帖子
    回复

    举报

    返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号 )

    GMT+8, 2024-4-27 23:25

    Powered by paopaomj X3.4 © 2016-2024 sitemap

    快速回复 返回顶部 返回列表