คุณสมบัติ CSS พอดีกับวัตถุ

สารบัญ

    แสดงสารบัญ

คุณสมบัติ CSS object-fit ใช้เพื่อระบุวิธีการ <img> หรือ <video> ควรปรับขนาดให้พอดีกับคอนเทนเนอร์

คุณสมบัติ CSS พอดีกับวัตถุ

คุณสมบัติ CSS object-fit ใช้เพื่อระบุว่า <img> หรือ <video> ควรเป็นอย่างไร สามารถปรับขนาดให้พอดีกับภาชนะได้

คุณสมบัตินี้บอกให้เนื้อหาเติมคอนเทนเนอร์ได้หลายวิธี เช่น "คงอัตราส่วนภาพนั้นไว้" หรือ "ยืดออกและใช้พื้นที่ให้มากที่สุด เป็นไปได้".

ดูภาพต่อไปนี้จากปารีส ภาพนี้กว้าง 400 พิกเซลและสูง 300 พิกเซล:

Paris

อย่างไรก็ตาม หากเราจัดสไตล์รูปภาพด้านบนให้มีความกว้างครึ่งหนึ่ง (200 พิกเซล) และมีความสูงเท่ากัน (300 พิกเซล) รูปภาพจะมีลักษณะดังนี้:

Paris

ตัวอย่าง

img {
  width: 200px;
  height: 
  300px;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width:200px;
  height:300px;
}
</style>
</head>
<body>

<h2>Image</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

เราเห็นว่ารูปภาพถูกบีบอัดให้พอดีกับคอนเทนเนอร์ขนาด 200x300 พิกเซล (อัตราส่วนภาพดั้งเดิมถูกทำลาย)

นี่คือที่มาของคุณสมบัติ object-fit ใน คุณสมบัติ object-fit สามารถใช้หนึ่งในนั้นได้ ค่าต่อไปนี้:

  • fill - นี่เป็นค่าเริ่มต้น รูปภาพจะถูกปรับขนาดให้เต็ม มิติที่กำหนด หากจำเป็น รูปภาพจะถูกยืดหรือบีบให้พอดี

  • มี - รูปภาพ คงอัตราส่วนไว้ แต่ปรับขนาดให้พอดีกับขนาดที่กำหนด

  • cover - รูปภาพจะคงอัตราส่วนไว้ และเติมเต็มมิติที่กำหนด ภาพจะถูกตัดให้พอดี

  • none - รูปภาพไม่ได้ปรับขนาด

  • ลดขนาด - รูปภาพอยู่ ลดขนาดลงเป็นเวอร์ชันที่เล็กที่สุดของ none หรือ มี

การใช้ object-fit: cover;

หากเราใช้ object-fit: cover; รูปภาพจะคงอัตราส่วนไว้ และเติมเต็มมิติที่กำหนด รูปภาพจะถูกตัดให้พอดี:

Paris

ตัวอย่าง

img {
  width: 200px;
  height: 
  300px;
  object-fit: cover;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}
</style>
</head>
<body>

<h2>Using object-fit: cover</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

การใช้ object-fit: contains;

หากเราใช้ object-fit: contains; รูปภาพจะคงอัตราส่วนไว้ แต่จะถูกปรับขนาดให้พอดีกับขนาดที่กำหนด:

Paris

ตัวอย่าง

img {
  width: 200px;
  height: 
  300px;
  object-fit: contain;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: contain;
}
</style>
</head>
<body>

<h2>Using object-fit: contain</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

การใช้ object-fit: fill;

หากเราใช้ object-fit: fill; รูปภาพจะถูกปรับขนาดให้เต็มมิติที่กำหนด หากจำเป็น รูปภาพจะถูกยืดหรือบีบให้พอดี:

Paris

ตัวอย่าง

img {
  width: 200px;
  height: 
  300px;
  object-fit: fill;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: fill;
}
</style>
</head>
<body>

<h2>Using object-fit: fill</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

การใช้ object-fit: none;

หากเราใช้ object-fit: none; รูปภาพจะไม่ถูกปรับขนาด:

Paris

ตัวอย่าง

img {
  width: 200px;
  height: 
  300px;
  object-fit: none;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: none;
}
</style>
</head>
<body>

<h2>Using object-fit: none</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

การใช้ object-fit: scale-down;

หากเราใช้ object-fit: scale-down; รูปภาพจะถูกลดขนาดลงเป็นเวอร์ชันที่เล็กที่สุดของ none หรือ <รหัส class="w3-codespan"> มี:

Paris

ตัวอย่าง

img {
  width: 200px;
  height: 
  300px;
  object-fit: scale-down;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: scale-down;
}
</style>
</head>
<body>

<h2>Using object-fit: scale-down</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

ตัวอย่างอื่น

ที่นี่เรามีภาพสองภาพและเราต้องการให้ภาพเหล่านี้เติมความกว้าง 50% ของหน้าต่างเบราว์เซอร์และ 100% ของความสูง

ในตัวอย่างต่อไปนี้ เราไม่ได้ใช้ object-fit ดังนั้นเมื่อเราปรับขนาดหน้าต่างเบราว์เซอร์ อัตราส่วนภาพของรูปภาพจะถูกทำลาย:

ตัวอย่าง

Norway Paris

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Not Using object-fit</h2>

<p>Here we use do not use "object-fit", so when we resize the browser window, the aspect ratio of the images will be destroyed:</p>

<div style="width:100%;height:400px;">
  <img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;">
  <img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;">
</div>

</body>
</html>

ในตัวอย่างถัดไป เราใช้ object-fit: cover; ดังนั้นเมื่อเราปรับขนาดหน้าต่างเบราว์เซอร์ อัตราส่วนภาพของรูปภาพจะยังคงอยู่:

ตัวอย่าง

Norway Paris

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Using object-fit</h2>

<p>Here we use "object-fit: cover;", so when we resize the browser window, the aspect ratio of the images is preserved:</p>

<div style="width:100%;height:400px;">
  <img src="rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
  <img src="paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>

</body>
</html>

CSS object-fit ตัวอย่างเพิ่มเติม

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงค่าที่เป็นไปได้ทั้งหมดของคุณสมบัติ object-fit ในตัวอย่างหนึ่ง:

ตัวอย่าง

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
</head>
<body>

<h1>The object-fit Property</h1>

<h2>No object-fit:</h2>
<img src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: fill (this is default):</h2>
<img class="fill" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: contain:</h2>
<img class="contain" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: cover:</h2>
<img class="cover" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: none:</h2>
<img class="none" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

</body>
</html>

วัตถุ CSS-* คุณสมบัติ

ตารางต่อไปนี้แสดงรายการคุณสมบัติ CSS object-*:

object-fit

ระบุวิธีปรับขนาด <img> หรือ <video> ให้พอดีกับคอนเทนเนอร์

object-position

ระบุว่า <img> หรือ <video> ควรอยู่ในตำแหน่งใดด้วย x/y พิกัดภายใน "กล่องเนื้อหาของตัวเอง"