淺談CSS中的 object-fit 與 object-position的使用

2024-07-11 08:25:24

字體：大中小

來源：轉載

供稿：網友

本文介紹了CSS中的 object-fit 與 object-position的使用，分享給大家，具體如下：

說明

問題：

一個div寬度不固定，高度固定，采用Flex布局，它里面有兩個元素一個img寬度占40%，高度占100%，一個p元素，寬度占60%，高度占100%，調整瀏覽器窗口大小，要保證，img元素不變形，寬高比不變，怎么辦！

從圖中可以看出，隨著調整瀏覽器窗口，圖片的寬高比也被破壞了，我們該怎么辦呢？我想大家應該會想到用 background，用一個div的background來替代img元素，這樣就可以調整它的background-size 和 background-position，就能保證圖片不變形，寬高比不變了，但是其實不用這么麻煩，我們直接用 object-fit 與 object-position 就可以了。

效果圖：

代碼：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <style type="text/css"> div{ height: 300px; border: 1px solid red; display: flex; } img { width: 40%; height: 100%; /*只是增加下面兩行就可以了*/ object-fit: none; object-position: center; /*這行都可以不寫，object-position 默認就是 center*/ } p{ width: 60%; height: 100%; background: blue; margin: 0; overflow: hidden; } </style></head><body> <div> <img src="http://img.blog.csdn.net/20171016170931485"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div></body></html>

上面是object-fit取值為 none 的情況，我們看看object-fit取值為 contain 的情況。