首页写一段html代码根据页面上要展示的多张图片大小在可以保持比例缩放的情况下合理的铺满屏幕

写一段html代码根据页面上要展示的多张图片大小在可以保持比例缩放的情况下合理的铺满屏幕

时间: 2023-05-26 13:02:07 浏览: 130

<!DOCTYPE html> <html> <head> <title>图片展示页面</title> <style> body { margin: 0; padding: 0; } .images-container { display: flex; flex-wrap: wrap; align-content: flex-start; } .image-wrapper { width: 25%; padding: 1em; box-sizing: border-box; } .image-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; } </style> </head> <body> <div class="images-container"> <div class="image-wrapper"> <img src="image1.jpg" alt="Image 1"> </div> <div class="image-wrapper"> <img src="image2.jpg" alt="Image 2"> </div> <div class="image-wrapper"> <img src="image3.jpg" alt="Image 3"> </div> <div class="image-wrapper"> <img src="image4.jpg" alt="Image 4"> </div> <div class="image-wrapper"> <img src="image5.jpg" alt="Image 5"> </div> <div class="image-wrapper"> <img src="image6.jpg" alt="Image 6"> </div> </div> </body> </html> 在上面的代码中，div.images-container 容器使用了弹性盒布局，设置了 flex-wrap: wrap 和 align-content: flex-start，这样就能让图片自动换行并从上往下排列。每个图片容器 div.image-wrapper 有 25% 的宽度，因此每行放置 4 张图片，每个图片容器里的图片 img 标签使用了 object-fit: contain，这样图片就能在保持比例的情况下缩放以适应容器大小，从而保证铺满屏幕。

阅读全文