安居客面試題：純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是控制溢位高度，保證高度不溢位。