# 图片自适应宽高
主要存在几种情况：
- 图片宽高在没有设置的时候，是按照原始尺寸进行展示的
img{
width: 100px;
height: 100px;
}
1
2
3
4
2
3
4
- 只设置宽度不设置高度，高度会保持比例进行缩放
img{
width: 100px;
/*height: auto;*/
}
1
2
3
4
2
3
4
- 不设置宽度只设置高度，宽度会保持比例进行缩放
img{
/*width: auto;*/
height: 100px;
}
1
2
3
4
2
3
4
- 固定展示区域，图片在盒子内保持比例最大限度的展示
.img-box{
width: 100px;
height: 100px;
img{
max-width: 100%;
max-height: 100%
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8