题目
实现一种图片容器布局,使得不同比例的图片都可以居中显示;
要求
- 图片宽度大于容器宽度时,要按容器宽度等缩放图片,并垂直居中显示;
- 图片高度大于容器高度时,要按容器高度等缩放图片,并水平居中显示;
- 图片宽高均小于等于容器宽高时,要按图片宽高显示,并水平和垂直居中;
实现代码
- html代码
<div class="box">
<img src="img/pic1.jpg"/>
</div>
<div class="box">
<img src="img/pic2.jpg"/>
</div>
<div class="box">
<img src="img/pic3.jpg"/>
</div>
//图片自己找
- css代码
.box{
border:1px solid red;//只是起修饰作用
position: relative;
width: 100px;
height: 100px;
}
.box img{
position: absolute;
top: 0;
bottom: 0;
left:0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
思路解析
- 对于box img样式
- position设置为absolute是为了使之后的top-right的设置生效;
(relative的定义:生成相对定位的元素,相对于其正常位置进行定位;absolute的定义:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。) - top-right若不设置,元素会朝着容器的左上跑。(我也不知道为什么);
- margin设置为auto,是为了水平居中;
- max-width和height的%是为了定义基于包含它的块级对象的百分比最大宽度;
- position设置为absolute是为了使之后的top-right的设置生效;
- 对于box样式
- position若不设置,那么会发生很恐怖的事!
因为img的position为absolute,定义为:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。如果box不设置position的话,那么img会把整个body当作自己的父元素。
- position若不设置,那么会发生很恐怖的事!