หน้านี้ได้รับการแปลโดย Cloud Translation API

คุณสมบัติ CSS สัดส่วนภาพใหม่ที่รองรับใน Chromium, Safari Technology Preview และ Firefox Nightly

พร็อพเพอร์ตี้ CSS ใหม่ที่ช่วยรักษาระยะห่างในเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์

Una Kravets

หมายเหตุ: สรุป: การรักษาอัตราส่วนความกว้างต่อความสูงให้สอดคล้องกันที่เรียกว่าสัดส่วนภาพเป็นสิ่งสำคัญในการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ และเพื่อป้องกันการเปลี่ยนเลย์เอาต์สะสม ตอนนี้เรายังมีวิธีที่ตรงไปตรงมายิ่งขึ้นด้วยพร็อพเพอร์ตี้ aspect-ratio ใหม่ที่เปิดตัวใน Chromium 88, Firefox 87 และ Safari Technology Preview 118

สัดส่วนภาพ

การรองรับเบราว์เซอร์

แหล่งที่มา

สัดส่วนภาพมักจะแสดงด้วยจำนวนเต็ม 2 ตัวและเครื่องหมายทวิภาคในมิติข้อมูลต่อไปนี้ ความกว้าง:ความสูง หรือ x:y สัดส่วนภาพที่พบมากที่สุดสำหรับการถ่ายภาพคือ 4:3 และ 3:2 ในขณะที่วิดีโอ และกล้องสำหรับผู้บริโภครุ่นใหม่ๆ มักจะใช้สัดส่วนภาพ 16:9

รูปภาพ 2 รูปที่มีสัดส่วนภาพเท่ากัน ขนาดแรกมีขนาด 634 x 951 พิกเซล ในขณะที่อีกรายการจะมีขนาด 200 x 300 พิกเซล ทั้งคู่มีสัดส่วนภาพ 2:3

เมื่อได้มีการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ การรักษาอัตราส่วนจึงมีความสำคัญมากขึ้นเรื่อยๆ นักพัฒนาเว็บ โดยเฉพาะเมื่อขนาดรูปภาพแตกต่างกันและขนาดองค์ประกอบเปลี่ยนไปตามที่มีอยู่ พื้นที่ทำงาน

ตัวอย่างบางส่วนของส่วนที่การรักษาอัตราส่วนเป็นสิ่งสำคัญ ได้แก่

สร้าง iframe ที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งเท่ากับ 100% ของความกว้างระดับบนสุดและความสูงควรยังคงอยู่ อัตราส่วนวิวพอร์ตที่เฉพาะเจาะจง
การสร้างคอนเทนเนอร์ตัวยึดตำแหน่งภายในสำหรับรูปภาพ วิดีโอ และการฝัง เพื่อป้องกันไม่ให้มีการจัดวางซ้ำเมื่อรายการโหลดและกินพื้นที่
การสร้างพื้นที่แบบปรับเปลี่ยนตามอุปกรณ์แบบเดียวกันสำหรับการแสดงภาพข้อมูลแบบอินเทอร์แอกทีฟหรือภาพเคลื่อนไหว SVG
การสร้างพื้นที่ที่ตอบสนองตามอุปกรณ์แบบเดียวกันสำหรับคอมโพเนนต์ที่มีหลายองค์ประกอบ เช่น การ์ดหรือวันที่ในปฏิทิน
การสร้างพื้นที่ตอบสนองแบบเดียวกันสำหรับรูปภาพหลายรูปที่มีขนาดแตกต่างกัน (ใช้ควบคู่กันไปได้ object-fit)

พอดีวัตถุ

การกำหนดสัดส่วนภาพช่วยให้เราปรับขนาดของสื่อในบริบทที่ปรับเปลี่ยนตามอุปกรณ์ได้ เครื่องมืออื่นใน ที่เก็บข้อมูลคือพร็อพเพอร์ตี้ object-fit ซึ่งช่วยให้ผู้ใช้อธิบายวิธีที่ออบเจ็กต์ (เช่น รูปภาพ) ได้ ภายในบล็อกใดบล็อกหนึ่งก็ควรเติมเต็มบล็อกนั้น

การแสดงภาพการสาธิตที่พอดีของออบเจ็กต์ — แสดงค่า `object-fit` แบบต่างๆ ดูการสาธิตบน Codepen

ค่า initial และ fill จะปรับรูปภาพให้เต็มพื้นที่อีกครั้ง ในตัวอย่างของเรา สิ่งนี้ทำให้เกิด รูปภาพจะถูกบีบและเบลอขณะปรับพิกเซลใหม่ ไม่เหมาะสม object-fit: cover ใช้ ใช้ขนาดที่เล็กที่สุดของรูปภาพเพื่อเติมเต็มพื้นที่ และครอบตัดรูปภาพให้พอดีกับพื้นที่ดังกล่าว "ซูมเข้า" ที่ขอบเขตต่ำสุด object-fit: contain ช่วยให้แน่ใจว่ารูปภาพทั้งหมด มองเห็นได้เสมอ และตรงข้ามกับ cover ซึ่งใช้ขนาดของขอบเขตใหญ่สุด (ในตัวอย่างของเราด้านบนคือความกว้าง) แล้วปรับขนาดภาพเพื่อรักษาอัตราส่วนเดิม ให้พอดีกับพื้นที่ เคส object-fit: none แสดงภาพที่ครอบตัดตรงกึ่งกลาง (ตำแหน่งวัตถุเริ่มต้น) ในขนาดตามปกติ

object-fit: cover มักจะทำงานได้ในสถานการณ์ส่วนใหญ่เพื่อให้ได้อินเทอร์เฟซแบบเดียวกันที่ดีเมื่อจัดการ แต่ด้วยภาพที่มีขนาดแตกต่างกัน ข้อมูลของคุณจะสูญหายไป (รูปภาพจะถูกครอบตัดที่ ขอบที่ยาวที่สุด)

หากรายละเอียดเหล่านี้สำคัญ (เช่น เมื่อทำงานกับผลิตภัณฑ์ความงามที่ราบเรียบ) เราไม่ยอมรับการครอบตัดเนื้อหาที่สำคัญ ดังนั้น สถานการณ์ที่เหมาะสมควรเป็น ภาพที่ปรับเปลี่ยนตามอุปกรณ์ ขนาดต่างๆ ที่พอดีกับพื้นที่ UI โดยไม่ต้องครอบตัด

เคล็ดลับเดิม: การรักษาสัดส่วนภาพด้วย `padding-top`

การใช้ระยะห่างจากขอบด้านบนเพื่อกำหนดสัดส่วนภาพ 1:1 ในรูปภาพตัวอย่างในโพสต์ภายในภาพสไลด์ — การใช้ `padding-top` เพื่อกำหนดสัดส่วนภาพ 1:1 ของรูปภาพตัวอย่างในโพสต์ภายในภาพสไลด์

เพื่อให้รูปภาพเหล่านี้ปรับเปลี่ยนตามอุปกรณ์มากขึ้น เราสามารถใช้สัดส่วนการแสดงผล ซึ่งทำให้เราสามารถตั้งค่า ขนาดอัตราส่วนที่ต้องการและวางสื่อส่วนที่เหลือตามแกนแต่ละแกน (ความสูงหรือความกว้าง)

โซลูชันข้ามเบราว์เซอร์ที่ได้รับการยอมรับในปัจจุบันสำหรับการรักษาอัตราส่วนภาพตาม หรือที่เรียกว่า "Padding-Top Hack" โซลูชันนี้ต้องมีคอนเทนเนอร์ระดับบนสุดและ ที่วางอย่างสมบูรณ์ จากนั้นแคมเปญหนึ่งจะคำนวณสัดส่วนการแสดงผลเป็นเปอร์เซ็นต์ที่จะตั้งค่า เป็น padding-top เช่น

สัดส่วนภาพ 1:1 = 1 / 1 = 1 = padding-top: 100%
สัดส่วนภาพ 4:3 = 3 / 4 = 0.75 = padding-top: 75%
สัดส่วนภาพ 3:2 = 2 / 3 = 0.66666 = padding-top: 66.67%
สัดส่วนภาพ 16:9 = 9 / 16 = 0.5625 = padding-top: 56.25%

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

<div class="container">
  <img class="media" src="..." alt="...">
</div>

เราจึงเขียน CSS ต่อไปนี้ได้

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

กำลังรักษาสัดส่วนภาพด้วย `aspect-ratio`

ใช้สัดส่วนภาพเพื่อกำหนดสัดส่วนภาพ 1:1 สำหรับรูปภาพตัวอย่างในโพสต์ภายในภาพสไลด์ — การใช้ `aspect-ratio` เพื่อกำหนดสัดส่วนภาพ 1:1 สำหรับรูปภาพตัวอย่างในโพสต์ภายในภาพสไลด์

แต่เราต้องขออภัย การคำนวณค่า padding-top เหล่านี้อาจไม่ง่ายนัก และต้องใช้ ค่าใช้จ่ายในการดำเนินการและการวางตำแหน่งเพิ่มเติม ด้วย CSS aspect-ratio ภายในแบบใหม่ พร็อพเพอร์ตี้ ซึ่งเป็นภาษาที่ใช้ในการจัดการอัตราส่วน อัตราส่วนต่างๆ ได้ชัดเจนมากขึ้น

ด้วยมาร์กอัปเดียวกัน เราสามารถแทนที่ padding-top: 56.25% ด้วย aspect-ratio: 16 / 9 aspect-ratio ต่ออัตราส่วนที่ระบุเป็น width / height

การใช้ระยะห่างจากขอบด้านบน

.container {
  width: 100%;
  padding-top: 56.25%;
}

การใช้สัดส่วนภาพ

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

การใช้ aspect-ratio แทน padding-top จะชัดเจนขึ้นมากและไม่ได้ปรับปรุงระยะห่างจากขอบ เพื่อทำสิ่งต่างๆ นอกขอบเขตตามปกติได้

คุณสมบัติใหม่นี้ยังเพิ่มความสามารถในการ ตั้งสัดส่วนภาพเป็น auto โดย "แทนที่องค์ประกอบด้วยสัดส่วนภาพที่แท้จริง" ให้ใช้สัดส่วนภาพนั้น อัตราส่วน ไม่เช่นนั้น ช่องนั้นไม่มีสัดส่วนภาพที่ต้องการ" หากทั้ง auto และ <ratio> เป็น สัดส่วนที่แนะนำคืออัตราส่วนที่ระบุไว้ที่ width หารด้วย height นอกจาก เป็นองค์ประกอบที่ถูกแทนที่ด้วย อัตราส่วนที่แท้จริง ซึ่งในกรณีนี้ระบบจะใช้อัตราส่วนดังกล่าวแทน

ตัวอย่าง: ความสอดคล้องในตารางกริด

วิธีนี้ได้ผลดีมากกับกลไกการออกแบบ CSS เช่น กริด CSS และ Flexbox พิจารณาสร้างรายการ สำหรับบุตรหลานที่คุณต้องการคงอัตราส่วนไว้ 1:1 เช่น ตารางกริดของไอคอนผู้สนับสนุน

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

รูปภาพในตารางกริดที่มีองค์ประกอบระดับบนสุดในขนาดต่างๆ ดูการสาธิตเกี่ยวกับ Codepen

ตัวอย่าง: การป้องกันการเปลี่ยนเลย์เอาต์

ฟีเจอร์ที่ยอดเยี่ยมอีกอย่างหนึ่งของ aspect-ratio คือสามารถสร้างพื้นที่ตัวยึดตำแหน่งเพื่อป้องกันไม่ให้ Cumulative Layout Shift และให้ Web Vitals ที่ดีขึ้น ในเบื้องต้น เช่น การโหลดเนื้อหาจาก API เช่น Unsplash จะสร้าง การเปลี่ยนเลย์เอาต์เมื่อสื่อโหลดเสร็จแล้ว

วิดีโอที่มีการเปลี่ยนเลย์เอาต์สะสมที่เกิดขึ้นเมื่อไม่ได้ตั้งค่าสัดส่วนภาพในเนื้อหาที่โหลด วิดีโอนี้บันทึกด้วยเครือข่าย 3G จำลอง

ในทางกลับกัน การใช้ aspect-ratio จะสร้างตัวยึดตำแหน่งเพื่อป้องกันไม่ให้เลย์เอาต์นี้เปลี่ยนแปลง

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

วิดีโอที่มีอัตราส่วนกำหนดไว้ได้รับการตั้งค่าในเนื้อหาที่โหลด วิดีโอนี้บันทึกด้วยเครือข่าย 3G จำลอง ดูการสาธิตเกี่ยวกับ Codepen

เคล็ดลับพิเศษ: แอตทริบิวต์รูปภาพสำหรับสัดส่วนภาพ

อีกวิธีหนึ่งในการตั้งค่าสัดส่วนภาพของรูปภาพคือการใช้แอตทริบิวต์ของรูปภาพ หากคุณทราบขนาดของรูปภาพล่วงหน้า ก็ควรเป็นแนวทางปฏิบัติแนะนำในการ ตั้งค่ามิติข้อมูลเหล่านี้เป็น width และ height

สำหรับตัวอย่างข้างต้น หากทราบว่าขนาดเป็น 800 x 600 พิกเซล มาร์กอัปรูปภาพจะมีลักษณะเช่นนี้ <img src="image.jpg" alt="..." width="800" height="600"> หากรูปภาพที่ส่งมีสัดส่วนเท่ากัน แต่ไม่จำเป็นว่าต้องเป็นค่าพิกเซลที่แน่นอน เราจะยังคงใช้รูปภาพ แอตทริบิวต์นี้เพื่อกำหนดอัตราส่วน รวมกับรูปแบบ width: 100% ว่ารูปภาพใช้พื้นที่ที่เหมาะสม ซึ่งทั้งหมดนี้จะมีหน้าตาดังนี้

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
}

ในท้ายที่สุด ผลลัพธ์จะเหมือนกับการตั้งค่า aspect-ratio ใน ภาพผ่านทาง CSS และหลีกเลี่ยงการเปลี่ยนแปลงเลย์เอาต์สะสม (ดูการสาธิตที่ Codepen)

บทสรุป

คุณสมบัติ aspect-ratio CSS ใหม่ ที่จะเปิดตัวในเบราว์เซอร์สมัยใหม่ต่างๆ มากมาย โดยยังคงรักษาความเหมาะสม สัดส่วนภาพในคอนเทนเนอร์สื่อและการจัดวางจะเรียบง่ายขึ้นเล็กน้อย

รูปภาพโดย Amy Shamblen และ Lionel Gustave ผ่าน Unsplash