css img等比例缩放并且图片水平垂直居中展示

css img等比例缩放并且图片水平垂直居中展示

父元素

	div{
		width: 400px;
		height: 400px;
		position: relative;/* 使用定位实现水平垂直居中 */
	}

按父容器宽度自动缩放，并且保持图片原本的长宽比

	img{
		width: auto;
	    height: auto;
	    max-width: 100%;
	    max-height: 100%;
	    /* 向父元素定位 */
	    position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
	}

没加定位效果图

加了定位效果图