图片等比拉伸需设置与父元素相同的高或宽{width:100%;/height:100%;}
如果图片的宽度大于父元素的宽度,不能使用text-align或margin:0 auto。
图片等比居中
1、需要设置
{position:absolute;left:50%;margin-left: -图片宽度的一半}
这样写要知道图片的宽度,有点不方便。
2、
父元素{ text-align:center; overflow:hidden}
img{margin: 0 -100%}
3. 这时用transform会比较好。
父元素{
width: 100%;
height:100%;
}
img{
position: relative;
top: 0px;
left: 50%;
height: 100%;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%);
}