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

QQ登录

只需要一步，快速开始

APP扫码登录

只需要一步，快速开始

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

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

    [复制链接]
    admin

    等级头衔

    积分成就    金币 : 2857
       泡泡 : 1516
       精华 : 6 篇
       在线时间 : 1319 小时
       最后登录 : 2025-5-14

    丰功伟绩

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

    联系方式
    发表于 2021-7-5 09:23:41 | 显示全部楼层 |阅读模式
    ⏹ 阅读停止中
    一、实例效果
    " ~% O+ A% ^9 c5 Z- Q: h+ vPC端预览的效果：1 @; Z5 |! X! s& w- I, ~3 {
    1.jpg 4 ]3 Z, f% P# _
    移动端的效果：; }( G8 `5 m6 _3 p7 x& z
    2.jpg
    1 J" ~- H- H6 _5 d4 s+ Y7 \二、要点解析' Y) [$ A- H* E/ I- B2 c* @0 y7 H
    • 采用display: grid创建一个合适的响应网格布局。
    • 将样式包装到媒体查询中，以适应于小尺寸屏幕。
      6 f2 n* {+ c9 D. i8 _
    三、案例代码
    9 [6 f3 d$ x5 P; {+ V% X- WHTML代码：; e# Q) _: X3 E# @; d
    复制代码
    <div class="image-mosaic">
  <div class="card card-tall card-wide" style="background-image: url('http://www.webqdkf.com/skin/default/images/gksj-09.jpg')">
  </div>
  <div class="card card-tall" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/e1edfa3a0786f4df7c442a1895522109.jpg')">
  </div>
  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/e2ab18d0d9ef27d2e2f6f589c501e25b.jpg')">
  </div>
  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/1755875dfb05ec8dc263be2f56d124e5.jpg')">
  </div>
  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/859ecf02e0f70819ba71d5fee8f72f12.jpg')">
  </div>
  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/21903f3245940092303fd5a519f813a2.jpg')">
  </div>
  <div class="card card-wide" style="background-image: url('http://www.webqdkf.com/skin/default/images/banner03-873-390.jpg')">
  </div>
  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/0d3c66ece10207b0d1dca9118560e16d.jpg')">
  </div>
  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/63fb35a52cd8f01b68d78aa0b6c5b021.jpg')">
  </div>
   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/63fb35a52cd8f01b68d78aa0b6c5b021.jpg')">
   </div>
  <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/e973c393fd7fda278977fb2ff686fdc9.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/52d11e4aef71cdb14d95cded9ffc3bf8.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/08-31/a03f0b9879a5361ba0a5519cbe1dbac1.jpg')">
  </div>
  <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-16/5ac65c5c5d7ead056d8ac2767b5648e1.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-09/b45e91e2b7c53f658f85f9d76f89aa77.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-08/186d506c004efa7896fa634e5139b6dc.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-09/f731e58e9bf7ee4c5b5b2a85e5dd2cbf.jpg')">
  </div>
   <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2020/09-11/c0f179887b1f9efa98c4af944e8d699b.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/052746e2767ffb56e045a5e7017ccec9.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-05/ede4d9983eefd8f88bf03eb966bceb5c.jpg')">
  </div>
  <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-05/2383cd70ff6d2f15350d64b0af572821.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-24/1442b8adc1f03141eb66e844e069caa8.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/0d3c66ece10207b0d1dca9118560e16d.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/052746e2767ffb56e045a5e7017ccec9.jpg')">
  </div>
</div>
    CSS代码：9 x5 T% `( T9 z
    复制代码
    .image-mosaic {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 240px;
}

    .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #353535;
  font-size: 3rem;
  color: #fff;
  box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
  height: 100%;
  width: 100%;
  border-radius: 4px;
  transition: all 500ms;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

@media screen and (min-width: 600px) {
  .card-tall {
    grid-row: span 2 / auto;
  }

  .card-wide {
    grid-column: span 2 / auto;
  }
}
    完整代码：$ x& R6 d4 C$ H) a1 t
    复制代码
    <html>
<head>
   <style type="text/css">
   .image-mosaic {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 240px;
}

    .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #353535;
  font-size: 3rem;
  color: #fff;
  box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
  height: 100%;
  width: 100%;
  border-radius: 4px;
  transition: all 500ms;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

@media screen and (min-width: 600px) {
  .card-tall {
    grid-row: span 2 / auto;
  }

  .card-wide {
    grid-column: span 2 / auto;
  }
}
</style>
</head>
<body>
  <div class="image-mosaic">
  <div class="card card-tall card-wide" style="background-image: url('http://www.webqdkf.com/skin/default/images/gksj-09.jpg')">
  </div>
  <div class="card card-tall" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/e1edfa3a0786f4df7c442a1895522109.jpg')">
  </div>
  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/e2ab18d0d9ef27d2e2f6f589c501e25b.jpg')">
  </div>
  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/1755875dfb05ec8dc263be2f56d124e5.jpg')">
  </div>
  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/859ecf02e0f70819ba71d5fee8f72f12.jpg')">
  </div>
  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2021/02-11/21903f3245940092303fd5a519f813a2.jpg')">
  </div>
  <div class="card card-wide" style="background-image: url('http://www.webqdkf.com/skin/default/images/banner03-873-390.jpg')">
  </div>
  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/0d3c66ece10207b0d1dca9118560e16d.jpg')">
  </div>
  <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/63fb35a52cd8f01b68d78aa0b6c5b021.jpg')">
  </div>
   <div class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/63fb35a52cd8f01b68d78aa0b6c5b021.jpg')">
   </div>
  <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/e973c393fd7fda278977fb2ff686fdc9.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/11-12/52d11e4aef71cdb14d95cded9ffc3bf8.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/08-31/a03f0b9879a5361ba0a5519cbe1dbac1.jpg')">
  </div>
  <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-16/5ac65c5c5d7ead056d8ac2767b5648e1.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-09/b45e91e2b7c53f658f85f9d76f89aa77.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-08/186d506c004efa7896fa634e5139b6dc.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2020/07-09/f731e58e9bf7ee4c5b5b2a85e5dd2cbf.jpg')">
  </div>
   <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2020/09-11/c0f179887b1f9efa98c4af944e8d699b.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/052746e2767ffb56e045a5e7017ccec9.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-05/ede4d9983eefd8f88bf03eb966bceb5c.jpg')">
  </div>
  <div class="card"  style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-05/2383cd70ff6d2f15350d64b0af572821.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-24/1442b8adc1f03141eb66e844e069caa8.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/0d3c66ece10207b0d1dca9118560e16d.jpg')">
  </div>
  <div  class="card" style="background-image: url('http://www.webqdkf.com/d/file/p/2019/09-04/052746e2767ffb56e045a5e7017ccec9.jpg')">
  </div>
</div>
</body>
</html>
    响应, 布局, 样式, 适应, 尺寸

    相关帖子
    回复

    举报

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

    本版积分规则

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

    GMT+8, 2025-6-8 07:58

    Powered by paopaomj X3.5 © 2016-2025 sitemap

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