<html lang="en">
<body>
<div class="bk">
<img src="https://i.postimg.cc/KjZycFPq/img01.png" alt="" class="">
<p class="text">圖片尺寸:寬200*高250</p>
</div>
<br />
<br />
<div class="flex">
<div class="bk">
<div class="object-div">
<img src="https://i.postimg.cc/KjZycFPq/img01.png" alt="" class="none-w100">
</div>
<p class="text">圖片尺寸小於容器:object-fit: none,圖片寬度100%時,圖片渲染寬度為容器寬度(所以會表現為圖片位置置中),但圖片顯示依舊為原圖尺寸</p>
</div>
<div class="bk">
<div class="object-div02">
<img src="https://i.postimg.cc/KjZycFPq/img01.png" alt="" class="none-w100">
</div>
<p class="text">圖片尺寸大於容器:object-fit: none,圖片寬度100%時,圖片顯示依舊為原圖尺寸,而圖片則置中裁減</p>
</div>
</div>
<br />
<br />
<div class="flex">
<div class="bk">
<div class="object-div">
<img src="https://i.postimg.cc/KjZycFPq/img01.png" alt="" class="none">
</div>
<p class="text">圖片尺寸小於容器:object-fit: none,圖片寬度無設置時,圖片渲染寬度原尺寸</p>
</div>
<div class="bk">
<div class="object-div02">
<img src="https://i.postimg.cc/KjZycFPq/img01.png" alt="" class="none">
</div>
<p class="text">圖片尺寸大於容器:object-fit: none,圖片寬度無設置時,圖片渲染寬度為原尺寸,而圖片則由容器起始點裁減</p>
</div>
</div>
</body>
</html>
@charset "UTF-8";
/*載入檔案區*/ /*斷點設置*/
/*列印用*/
/*列印用裡面生效的css*/
/*列印時設定邊界用*/
@page {
}
.object-div {
width: 300px;
height: 350px;
background: red;
}
.object-div02 {
width: 150px;
height: 170px;
overflow: hidden;
background: red;
}
.bk {
width: 300px;
margin: 20px;
}
.none-w100 {
object-fit: none;
object-fit: none;
width: 100%;
}
.none {
object-fit: none;
object-fit: none;
}
.flex {
display: box;
display: flexbox;
display: flex;
}
.text {
padding-top: 20px;
width: 100%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.