css解決圖片拉伸問題

在實際場景中，我們經常會遇到圖片大小固定的需求，但是由於原始圖片大小，比例不一樣，不同圖片以相同的大小展示會參差不齊。解決方法就是object-fit或者background-size屬性。他們的區別是前者用於指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框，后者用於規定背景圖像的尺寸。關於各自的屬性值可看MDN文檔，經常用到的屬性值就是cover，它可以根據圖片寬高比例來填充內容框/背景大小，如果圖片的寬高比與內容框/背景不相匹配，該圖片將被剪裁以適應內容框。除此之外：object-fill還可用於解決video標簽充滿父元素的問題。