menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

使用CSS实现的图片自适应UI模板代码

武飞扬头像
Microacn
帮助3人

HTML代码：

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
    <title>css实现图片排版效果</title>
  8.  
    <link rel="stylesheet" href="./ceshi.css">
  9.  
    </head>
  10.  
    <body>
  11.  
    <!--
  12.  
    css图片自适应模板
  13.  
    -->
  14.  
    <div class="centent">
  15.  
    <div class="main">
  16.  
    <div class="img">
  17.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  18.  
    </div>
  19.  
    </div>
  20.  
    <div class="main">
  21.  
    <div class="img">
  22.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  23.  
    </div>
  24.  
    </div>
  25.  
    <div class="main">
  26.  
    <div class="img">
  27.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  28.  
    </div>
  29.  
    </div>
  30.  
    <div class="main">
  31.  
    <div class="img">
  32.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  33.  
    </div>
  34.  
    </div>
  35.  
    <div class="main">
  36.  
    <div class="img">
  37.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  38.  
    </div>
  39.  
    </div>
  40.  
    <div class="main">
  41.  
    <div class="img">
  42.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  43.  
    </div>
  44.  
    </div>
  45.  
    <div class="main">
  46.  
    <div class="img">
  47.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  48.  
    </div>
  49.  
    </div>
  50.  
    <div class="main">
  51.  
    <div class="img">
  52.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  53.  
    </div>
  54.  
    </div>
  55.  
    <div class="main">
  56.  
    <div class="img">
  57.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  58.  
    </div>
  59.  
    </div>
  60.  
    <div class="main">
  61.  
    <div class="img">
  62.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  63.  
    </div>
  64.  
    </div>
  65.  
    <div class="main">
  66.  
    <div class="img">
  67.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  68.  
    </div>
  69.  
    </div>
  70.  
    <div class="main">
  71.  
    <div class="img">
  72.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  73.  
    </div>
  74.  
    </div>
  75.  
    <div class="main">
  76.  
    <div class="img">
  77.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  78.  
    </div>
  79.  
    </div>
  80.  
    <div class="main">
  81.  
    <div class="img">
  82.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  83.  
    </div>
  84.  
    </div>
  85.  
    <div class="main">
  86.  
    <div class="img">
  87.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  88.  
    </div>
  89.  
    </div>
  90.  
    <div class="main">
  91.  
    <div class="img">
  92.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  93.  
    </div>
  94.  
    </div>
  95.  
    <div class="main">
  96.  
    <div class="img">
  97.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  98.  
    </div>
  99.  
    </div>
  100.  
    <div class="main">
  101.  
    <div class="img">
  102.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  103.  
    </div>
  104.  
    </div>
  105.  
    <div class="main">
  106.  
    <div class="img">
  107.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  108.  
    </div>
  109.  
    </div>
  110.  
    <div class="main">
  111.  
    <div class="img">
  112.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  113.  
    </div>
  114.  
    </div>
  115.  
    <div class="main">
  116.  
    <div class="img">
  117.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  118.  
    </div>
  119.  
    </div>
  120.  
    <div class="main">
  121.  
    <div class="img">
  122.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  123.  
    </div>
  124.  
    </div>
  125.  
    <div class="main">
  126.  
    <div class="img">
  127.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  128.  
    </div>
  129.  
    </div>
  130.  
    <div class="main">
  131.  
    <div class="img">
  132.  
    <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
  133.  
    </div>
  134.  
    </div>
  135.  
    </div>
  136.  
    </body>
  137.  
    </html>
学新通

CSS代码：

  1.  
    body {
  2.  
    padding: 15px;
  3.  
    min-width: 320px;
  4.  
    }
  5.  
     
  6.  
    .img>img {
  7.  
    width: 100%;
  8.  
    height: 100%;
  9.  
    border-radius: 5px;
  10.  
    object-fit: cover;
  11.  
    }
  12.  
     
  13.  
    .img {
  14.  
    display: flex;
  15.  
    width: 90%;
  16.  
    height: 90%;
  17.  
    align-items: center;
  18.  
    border-radius: 5px;
  19.  
    }
  20.  
     
  21.  
    .main {
  22.  
    display: flex;
  23.  
    justify-content: center;
  24.  
    align-items: center;
  25.  
    width: 25%;
  26.  
    height: 250px;
  27.  
    max-width: 25%;
  28.  
    }
  29.  
     
  30.  
    .centent {
  31.  
    display: flex;
  32.  
    flex-wrap: wrap;
  33.  
    width: 100%;
  34.  
    height: auto;
  35.  
    min-height: 320px;
  36.  
    }
  37.  
     
  38.  
    @media screen and (max-width: 1000px) {
  39.  
    .main {
  40.  
    display: flex;
  41.  
    justify-content: center;
  42.  
    align-items: center;
  43.  
    width: 33.3%;
  44.  
    height: 250px;
  45.  
    max-width: 33.3%;
  46.  
    }
  47.  
     
  48.  
    body {
  49.  
    padding: 5px;
  50.  
    }
  51.  
    }
  52.  
     
  53.  
    @media screen and (max-width: 756px) {
  54.  
    .main {
  55.  
    display: flex;
  56.  
    justify-content: center;
  57.  
    align-items: center;
  58.  
    width: 50%;
  59.  
    height: 250px;
  60.  
    max-width: 50%;
  61.  
    }
  62.  
     
  63.  
    body {
  64.  
    padding: 8px;
  65.  
    }
  66.  
    }
  67.  
     
  68.  
    @media screen and (max-width: 500px) {
  69.  
    body {
  70.  
    padding: 3px;
  71.  
    }
  72.  
    }
  73.  
     
  74.  
    @media screen and (max-width: 350px) {
  75.  
    body {
  76.  
    padding: 0px;
  77.  
    }
  78.  
    }
学新通

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhffjgch
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群