เจาะลึกเข้าไปในวัตถุพอดีและขนาดพื้นหลังใน CSS

เราไม่สามารถโหลดรูปภาพที่มีขนาดต่างกันสำหรับองค์ประกอบ HTML ได้เสมอไป หากเราใช้ความกว้างและความสูงที่ไม่เป็นสัดส่วนกับอัตราส่วนกว้างยาวของรูปภาพ รูปภาพนั้นอาจถูกบีบอัดหรือยืดออก นั่นไม่ดี และสามารถแก้ไขได้ด้วย object-fit สำหรับองค์ประกอบ img หรือโดยใช้ background-size

ขั้นแรก มากำหนดปัญหากันก่อน พิจารณารูปต่อไปนี้:

ทำไมสิ่งนี้ถึงเกิดขึ้น?

รูปภาพจะมีอัตราส่วนกว้างยาว และเบราว์เซอร์จะเติมกล่องที่มีรูปภาพนั้น หากอัตราส่วนกว้างยาวของรูปภาพแตกต่างจากความกว้างและความสูงที่ระบุ ผลลัพธ์จะเป็นรูปภาพที่บีบหรือขยาย

เราเห็นสิ่งนี้ในรูปต่อไปนี้:

การแก้ไขปัญหา

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

ตอนนี้เราเข้าใจวิธีการทำงานแล้ว มาดูวิธีการทำงานในเบราว์เซอร์กัน ( แจ้งเตือนสปอยเลอร์: ง่ายกว่า! )

CSS object-fit

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

มาดูค่าที่เป็นไปได้กัน

ค่าที่เป็นไปได้สำหรับ object-fit

object-fit: contain

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

object-fit: cover

ที่นี่ รูปภาพจะถูกปรับขนาดให้พอดีกับอัตราส่วนกว้างยาวของคอนเทนเนอร์ และหากอัตราส่วนกว้างยาวของรูปภาพไม่ตรงกับคอนเทนเนอร์ รูปภาพนั้นจะถูกตัดให้พอดี

object-fit: fill

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

object-fit: none

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

นอกเหนือจาก object-fit เรายังมีคุณสมบัติ object-position ซึ่งมีหน้าที่ในการวางตำแหน่งรูปภาพภายในคอนเทนเนอร์

ค่าที่เป็นไปได้สำหรับ object-position

คุณสมบัติ object-position ทำงานคล้ายกับคุณสมบัติ background-position ของ CSS:

คำหลัก top และ bottom ยังใช้งานได้เมื่ออัตราส่วนกว้างยาวของกล่องที่บรรจุอยู่ในแนวตั้งมากขึ้น:

CSS background-size

ด้วย background-size ข้อแตกต่างประการแรกคือเรากำลังจัดการกับพื้นหลัง ไม่ใช่องค์ประกอบ HTML ( img )

ค่าที่เป็นไปได้สำหรับ background-size

ค่าที่เป็นไปได้สำหรับ background-size คือ auto , contain และ cover

background-size: auto

ด้วย auto รูปภาพจะอยู่ที่ขนาดเริ่มต้น:

background-size: cover

ที่นี่ รูปภาพจะถูกปรับขนาดให้พอดีกับคอนเทนเนอร์ หากอัตราส่วนภาพไม่เท่ากัน รูปภาพจะถูกปิดบังให้พอดี

background-size: contain

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

สำหรับ background-position จะคล้ายกับการทำงานของ object-position ข้อแตกต่างเพียงอย่างเดียวคือตำแหน่งเริ่มต้นของตำแหน่ง object-position แตกต่างจาก background-position

เมื่อไม่ใช้ object-fit หรือ background-size

หากองค์ประกอบหรือรูปภาพได้รับความสูงคงที่และมี background-size: cover หรือ object-fit: cover จะมีจุดที่ภาพกว้างเกินไปจึงสูญเสียรายละเอียดที่สำคัญที่อาจส่งผลต่อวิธีการ ผู้ใช้รับรู้ภาพ

พิจารณาตัวอย่างต่อไปนี้ซึ่งรูปภาพมีความสูงคงที่:

 .card__thumb { height: 220px; }

หากภาชนะของการ์ดกว้างเกินไปก็จะส่งผลให้เราเห็นทางด้านขวา (ภาพที่กว้างเกินไป) นั่นเป็นเพราะเราไม่ได้ระบุอัตราส่วนกว้างยาว

มีเพียงหนึ่งในสองการแก้ไขสำหรับสิ่งนี้ อย่างแรกคือการใช้แฮ็กช่องว่างภายในเพื่อสร้างอัตราส่วนที่แท้จริง

 .card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

การแก้ไขที่สองคือการใช้คุณสมบัติ CSS aspect-ratio ใหม่ เมื่อใช้มัน เราสามารถทำสิ่งต่อไปนี้ได้:

 .card__thumb img { aspect-ratio: 4 / 3; }

หมายเหตุ : ฉันได้เขียนรายละเอียดเกี่ยวกับคุณสมบัติ aspect-ratio แล้ว ในกรณีที่คุณต้องการเรียนรู้เกี่ยวกับคุณสมบัตินี้: “มาเรียนรู้เกี่ยวกับอัตราส่วนกว้างยาวใน CSS กันเถอะ”

ใช้กรณีและตัวอย่าง

อวตารผู้ใช้

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

 .c-avatar { object-fit: cover; }

รายการโลโก้

รายชื่อลูกค้าของธุรกิจเป็นสิ่งสำคัญ เรามักจะใช้โลโก้เพื่อการนี้ เนื่องจากโลโก้จะมีขนาดต่างกัน เราจึงต้องมีวิธีปรับขนาดโดยไม่ทำให้ผิดเพี้ยน

โชคดีที่ object-fit: contain ทางออกที่ดีสำหรับสิ่งนั้น

 .logo__img { width: 150px; height: 80px; object-fit: contain; }

ภาพขนาดย่อของบทความ

นี่เป็นกรณีใช้งานทั่วไป คอนเทนเนอร์สำหรับภาพขนาดย่อของบทความอาจไม่มีรูปภาพที่มีอัตราส่วนกว้างยาวเท่ากันเสมอไป ปัญหานี้ควรได้รับการแก้ไขโดยระบบจัดการเนื้อหา (CMS) ตั้งแต่แรก แต่ก็ไม่เสมอไป

 .article__thumb { object-fit: cover; }

พื้นหลังฮีโร่

ในกรณีการใช้งานนี้ การตัดสินใจว่าจะใช้องค์ประกอบ img หรือพื้นหลัง CSS จะขึ้นอยู่กับสิ่งต่อไปนี้:

• รูปนั้นสำคัญไฉน? หาก CSS ถูกปิดใช้งานด้วยเหตุผลบางอย่าง เราต้องการให้ผู้ใช้เห็นรูปภาพหรือไม่
• หรือจุดประสงค์ของภาพเป็นเพียงการตกแต่ง?

จากคำตอบของเรา เราสามารถตัดสินใจได้ว่าจะใช้คุณลักษณะใด หากภาพมี ความสำคัญ :

 <section class="hero"> <img class="hero__thumb" src="thumb.jpg" alt="" /> </section>

 .hero { position: relative; } .hero__thumb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

หากเป็นภาพ ตกแต่ง เราสามารถไปกับ background-image :

 .hero { position: relative; background-image: linear-gradient(to top, #a34242, rgba(0,0,0,0), url("thumb.jpg"); background-repeat: no-repeat; background-size: cover; }

CSS จะสั้นกว่าในกรณีนี้ ตรวจสอบให้แน่ใจว่าข้อความที่วางทับรูปภาพนั้นสามารถอ่านและเข้าถึงได้

การเพิ่มพื้นหลังให้กับรูปภาพด้วย object-fit: contain

คุณรู้หรือไม่ว่าคุณสามารถเพิ่มสีพื้นหลังให้กับ img ได้? เราจะได้รับประโยชน์จากสิ่งนั้นเมื่อใช้ object-fit: contain .

ในตัวอย่างด้านล่าง เรามีตารางรูปภาพ เมื่ออัตราส่วนกว้างยาวของรูปภาพและคอนเทนเนอร์ต่างกัน สีพื้นหลังจะปรากฏขึ้น

 img { object-fit: contain; background-color: #def4fd; }

องค์ประกอบวิดีโอ

คุณเคยต้องการ video เป็นพื้นหลังหรือไม่? ถ้าใช่ คุณอาจต้องการให้เต็มความกว้างและความสูงของพาเรนต์

 .hero { position: relative; background-color: #def4fd; } .hero__video { position: aboslute; left: 0; top: 0; width: 100%; height: 100%; }

เพื่อให้ครอบคลุมความกว้างและความสูงของพาเรนต์อย่างสมบูรณ์ เราจำเป็นต้องแทนที่ค่าเริ่มต้น object-fit :

 .hero__video { /* other styles */ object-fit: cover; }

บทสรุป

ดังที่เราได้เห็น ทั้ง object-fit และ background-size นั้นมีประโยชน์มากสำหรับการจัดการอัตราส่วนภาพที่แตกต่างกัน เราไม่สามารถควบคุมการกำหนดขนาดที่สมบูรณ์แบบสำหรับแต่ละภาพได้เสมอ และนั่นคือจุดที่คุณสมบัติ CSS ทั้งสองนี้โดดเด่น

คำเตือนที่เป็นมิตรเกี่ยวกับผลการช่วยสำหรับการเข้าถึงของการเลือกระหว่างองค์ประกอบ img และพื้นหลัง CSS: หากรูปภาพมีการตกแต่งเพียงอย่างเดียว ให้เลือกใช้พื้นหลัง CSS มิฉะนั้น img จะเหมาะสมกว่า

ฉันหวังว่าคุณจะพบว่าบทความนี้มีประโยชน์ ขอบคุณสำหรับการอ่าน.