img
vertical-align:middle; 设置页面垂直居中的,如果无效的话使用 display:table-cel,讲块元素转化为单元格,在使用vertical-align属性水质居中。
max-width:100%; 限制了图片大小。图片本身是多大就是多大。不会超过100%的宽度;
width:100%; 始终和父级相等,父级是100px;图片的100%=100px;父级是 500px,图片100%=500px;
也可以利用行高来解决垂直居中:
css:
.d1{ width:50px; height:150px; line-height:150px;}
.d1 img{ width:100%; max-width:50px; max-height:60px; }
html:
<div class="d1">
<img src="aa.png" />
</div>
background:
background-size:cover;把背景图片扩展至足够大,以使背景图片完全覆盖背景区域。
background-size:contain;把背景图片扩展至最大尺寸,以使宽度和高度完全适应内容区域。