<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ display: flex;/*显示模式设置为弹性盒子*/ flex-wrap: wrap;/*进行强制换行*/ } div:after{ /*对最后一个伪元素进行最大限度伸缩*/ content: ' '; flex-grow: 999999999999999999999999999999999999; } img{ height: 200px;/*高度*/ width: auto; margin: 2px; flex-grow: 1;/*进行按比例伸缩*/ object-fit: cover;/*进行裁切,并且图片按比例缩放*/ }</style> </head> <body> <div> <img src="./1.jpg"/> <img src="./2.jpg"/> <img src="./3.jpg"/> <img src="./4.jpg"/><img src="./9.jpg"/> <img src="./5.jpg"/><img src="./10.jpg"/> <img src="./6.jpg"/><img src="./11.jpg"/> <img src="./7.jpg"/><img src="./12.jpg"/> <img src="./8.jpg"/> <div> </body> </html>