CSS之图片容器布局设计（按比例居中）--前端面试准备&&阿里笔试题

题目

实现一种图片容器布局，使得不同比例的图片都可以居中显示；

要求

1. 图片宽度大于容器宽度时，要按容器宽度等缩放图片，并垂直居中显示；
2. 图片高度大于容器高度时，要按容器高度等缩放图片，并水平居中显示；
3. 图片宽高均小于等于容器宽高时，要按图片宽高显示，并水平和垂直居中；

实现代码

• 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样式
  1. position设置为absolute是为了使之后的top-right的设置生效;
     （relative的定义：生成相对定位的元素，相对于其正常位置进行定位；absolute的定义：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。）
  2. top-right若不设置，元素会朝着容器的左上跑。(我也不知道为什么)；
  3. margin设置为auto，是为了水平居中；
  4. max-width和height的%是为了定义基于包含它的块级对象的百分比最大宽度；
• 对于box样式
  1. position若不设置，那么会发生很恐怖的事！
     因为img的position为absolute，定义为：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。如果box不设置position的话，那么img会把整个body当作自己的父元素。

参考1