每個(gè)企業(yè)都希望自己的網(wǎng)站能深入人心，那除了合理的布局和精美的設(shè)計(jì)外，網(wǎng)站開(kāi)發(fā)技術(shù)也是非常重要的一環(huán)，在本文中，我們將介紹如何object-fit和background-size工作，何時(shí)可以使用它們，以及一些實(shí)際用例和建議。

我們并不總是能夠?yàn)?HTML 元素加載不同大小的圖像。如果我們使用的寬度和高度與圖像的縱橫比不成比例，則圖像可能會(huì)被壓縮或拉伸。這不好，可以使用object-fitforimg元素或使用background-size.


圖像將具有縱橫比，瀏覽器將用該圖像填充包含框。如果圖像的縱橫比不同于為其指定的寬度和高度，則結(jié)果將是壓縮或拉伸的圖像。


當(dāng)圖像的縱橫比與包含元素的寬度和高度不對(duì)齊時(shí)，我們并不總是需要添加不同大小的圖像。在深入研究 CSS 解決方案之前，我想向您展示我們過(guò)去如何在照片編輯應(yīng)用程序中做到這一點(diǎn)：