<!DOCTYPE html>
<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 {
  -o-object-fit: none;
  object-fit: none;
  width: 100%;
}

.none {
  -o-object-fit: none;
  object-fit: none;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.text {
  padding-top: 20px;
  width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.