为了让IMG自适应大小,以下我作了一个横向自适应的示例:html
width:100%; height:auto;
width:auto; height:100%;
display:flex; align-items:center; justify-content:center;
以下是两个大小和比例都不一样的图片,应用这个方法可让图片自动填充并居中显示web
<html> <head> <title>让图片自动适应DIV容器大小</title> <style> .ShaShiDi{ width:500px; height:400px; display:flex; align-items:center; justify-content:center; /*为了效果明显,能够将以下边框打开,看一下效果*/ /* border:1px solid black; */ } .ShaShiDi img{ width:100%; height:auto; } </style> </head> <body> <div class="ShaShiDi"> <img src="./1.png"/> </div> <div class="ShaShiDi"> <img src="./2.png"/> </div> </body> </html>