css实现图片自适应容器的几种方式

.div1{width:500px;高度：400px；border:1pxsolidblack;}.div1img{/*width:100%;高度：100%；*/}这是一个普通的Peggy（如果图片比容器大，图片会超出容器）。div1{width:500px;高度：400px；border:1pxsolidblack;}.div1img{width:100%;height:100%;}这是100%的Peggy额头，仿佛新年刚过。虽然满足了自适应要求，但是如图所示，画面出现了失真。如果图片小于容器，如果强行适配图片，图片会失真。如果是单张图片（logo、placeholder等），可以根据设计稿进行开发。但是，我们经常会遇到界面获取到的图片不规则的情况。一般如果图片比容器小，就会水平居中，垂直居中。整理任务：当图片的宽高小于容器时，当宽高大于容器时，将图片垂直和水平居中，保持纵横比，填充容器宽度或高度