安居客面试题：纯css实现未知比例图片自适应且水平垂直居中

安居客的前端面试题之一

• 不剪裁图片
• 不变形
• 未知比例的情况下，自动填充div
• 图片垂直水平居中

    <div
        <img src="1.png" alt="偏长的图">
    </div>
    <div>
        <img src="2.png" alt="偏宽的图">
    </div>
复制代码

div{
    width: 300px;
    height: 300px;
    background: #e6e6e6;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    padding: 10px;
}
img{
    max-width: 100%;
    max-height: 100%;
}
复制代码

获得原始比例的img

通过设置img标签的max-width和max-height

max-width相当于是一个守门员、到了临界值才会去保证最大是这个值。

如果图片大于div宽度，图片就会是跟div宽度一样的，原比例等高。 如果图片大于div高度，图片就会跟div高度一样，原比例等宽。

max-width是控制溢出宽度，保证宽度不溢出。 max-height是控制溢出高度，保证高度不溢出。