已知盒子大小,盒子中的图片一边铺满且图片不变形

tech2023-02-27  110

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 400px; height: 400px; display: flex; justify-content: center; align-items: center; border: 1px solid #ddd; overflow: hidden; } img { width: auto; height: auto; max-width: 100%; max-height: 100%; } </style> </head> <body> <div class="box"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599123414060&di=e046018a0d4cc62a46a0ecad4f9b015d&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg" id="img" /> <!-- <img src="http://cache.jiangxinxiaozhen.com//WeekHead/2020/8/24/2020_8_24_11_50_22_5829.jpg" id="img" /> --> </div> </body> </html>

效果如图

最新回复(0)