資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 object-fit 和 object-position 透過 CSS 裁剪圖片
CSS object-fit 和 object-position 屬性幫助我們裁剪圖片並指定如何在元素中顯示。
CSS object-fit 屬性的語法如下 −
Selector {
object-fit: /*value*/
object-position:/*value*/
}示例
以下示例說明了 CSS object-fit 屬性。
<!DOCTYPE html>
<html>
<head>
<style>
img {
object-fit: cover;
}
img:last-of-type {
object-fit: contain;
}
</style>
</head>
<body>
cover
<img src="https://images.unsplash.com/photo-1611423837981- 2cba00ee7631?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" width="200" height="250"/>
<img src="https://images.unsplash.com/photo-1611423837981- 2cba00ee7631?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" width="200" height="250"/>
contain
</body>
</html>輸出
這將產生以下結果 −
示例
<!DOCTYPE html>
<html>
<style>
div {
border: 1px solid blue;
width:100%;
height:300px;
}
img {
float:left;
width:50%;
height:100%;
object-fit:cover;
object-position: 20px -10px;
}
</style>
<body>
<div >
<img src="https://images.unsplash.com/photo-1611800065908-
233b597db552?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixlib=rb1.2.1&q=80&w=250" />
<img src="https://images.unsplash.com/photo-1612626256634-
991e6e977fc1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixlib=rb1.2.1&q=80&w=250"/>
</div>
</body>
</html>輸出
這將產生以下結果 −
調整大小的影響
更新於: 13-03-2021
296 次瀏覽
廣告