首页
直播
壁纸
友链
Search
1
一个超好用的图床
5,176 阅读
2
网页版朋友圈程序 – LAN (现已发布)
2,577 阅读
3
给大家分享几个实用网站
1,395 阅读
4
超简洁的个人主页引导页 全网首发
1,188 阅读
5
域名在QQ内打开提示'非官方页面'的解决方法
1,026 阅读
休闲娱乐
资源分享
编程技术
人工智能
登录
Search
标签搜索
python
苏画
个人导航
资源分享
个人主页
教程
苏画主页
Github
人脸识别
宝塔
爬虫
api
接口
苏画导航
导航
苏画个人导航
苏画个人主页
白嫖
opencv
微博
苏画
累计撰写
51
篇文章
累计收到
607
条评论
首页
栏目
休闲娱乐
资源分享
编程技术
人工智能
页面
直播
壁纸
友链
搜索到
1
篇与
html
的结果
2021-05-14
使用css实现简单的图片自适应UI模板
使用css布局一个非常简单的自适应图片UI模板效果预览HTML代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css实现图片排版效果</title> <link rel="stylesheet" href="./ceshi.css"> </head> <body> <!-- css图片自适应模板 苏画-博客:qemao.com --> <div class="centent"> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/be89d4b8b923c55cc36088c2bbfafbe7.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/2021-04-22-15_03_36.jpg" alt=""> </div> </div> <div class="main"> <div class="img"> <img src="http://sh.qemao.com/tools/tol/tu/_filew/1a4662b54093989122989e686b20f9df.jpg" alt=""> </div> </div> </div> </body> </html> css代码body { padding: 15px; min-width: 320px; } .img>img { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; } .img { display: flex; width: 90%; height: 90%; align-items: center; border-radius: 5px; } .main { display: flex; justify-content: center; align-items: center; width: 25%; height: 250px; max-width: 25%; } .centent { display: flex; flex-wrap: wrap; width: 100%; height: auto; min-height: 320px; } @media screen and (max-width: 1000px) { .main { display: flex; justify-content: center; align-items: center; width: 33.3%; height: 250px; max-width: 33.3%; } body { padding: 5px; } } @media screen and (max-width: 756px) { .main { display: flex; justify-content: center; align-items: center; width: 50%; height: 250px; max-width: 50%; } body { padding: 8px; } } @media screen and (max-width: 500px) { body { padding: 3px; } } @media screen and (max-width: 350px) { body { padding: 0px; } }
2021年05月14日
264 阅读
0 评论
3 点赞