背景图片缩放显示在元素的正中央

前言:
想让图片显示在元素的中央,如果采用
img{margin:auto;display:block;}
的话,图片只会在水平中央而不会垂直中央。
后来我发现如果让图片变成元素的背景图。采用
#img{height:153px; width:100%;display:block;background-position:center;background-repeat:no-repeat;}
(注意:元素的高宽须设置,不然元素会塌陷为0,背景图不能被显示)
可以让元素的背景图缩放显示在元素的正中央。但是如果设置背景图宽度和高度都100%有时候会拉伸或者压缩;如果只设置宽度100%那么当图片是宽度小于高度的时候,图片会溢出;如果只设置高度100%那么当高度小于宽度的时候图片也会溢出;

解决:条件判断:当实际背景图的宽度大于高度的时候,设置它在元素里宽度100%;当实际背景图的高度大于宽度的时候,设置它在元素里高度100%;

不知道为什么当宽度大于高度的时候虽然showimg的class名字增加了imgw,但是样式仍然无效。所以我只好让#img背景图宽度100%,添加这样一个样式background-size:100%。然后当高度大于宽度的时候会覆盖掉这个样式变成高度100%。










你可能感兴趣的:(前端)