搜索到
1
篇与
ui
的结果
-
使用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; } }
