ในฐานะนักพัฒนาเว็บ เราเล่นกับรูปภาพอยู่ตลอด และในกรณีส่วนใหญ่ เบราว์เซอร์จะปรับขนาดรูปภาพให้พอดีกับขอบเขตของการออกแบบเว็บไซต์ของเราได้ในขณะที่ยังคงรูปภาพให้ดูดีอยู่ แต่เกิดอะไรขึ้นเมื่อคุณต้องการควบคุมวิธีที่เบราว์เซอร์ปรับขนาดรูปภาพบนหน้าเว็บของคุณ
Chrome 41 (เบต้าในเดือนมกราคม 2015) ขอแนะนำพร็อพเพอร์ตี้ CSS ใหม่ image-rendering: pixelated (ข้อกำหนด) ที่ให้คุณควบคุมวิธีที่เบราว์เซอร์แสดงผลรูปภาพที่มีการปรับขนาดมากขึ้นได้
พร็อพเพอร์ตี้ CSS image-rendering และค่า pixelated น่าสนใจเนื่องจากจะปิดการปรับขนาดอย่างลื่นไหลมาตรฐานของเบราว์เซอร์ (โดยทั่วไปคือการประมาณค่าในช่วง 2 เชิงเส้น) และแทนที่ด้วยอัลกอริทึมการปรับขนาดอื่น (พื้นที่ใกล้เคียงที่สุดในกรณีส่วนใหญ่) เมื่อปรับขนาดรูปภาพ
ลองนึกภาพว่าคุณมีรูปภาพขนาด 2×2 พิกเซล และขยายเป็น 100×100 พิกเซล เบราว์เซอร์จะแสดงผลในลักษณะที่ไม่ทำให้ดูบดบัง ประมาณนี้
มีหลายกรณีที่คุณไม่ต้องการให้ระบบทำงานแบบปรับให้เรียบนี้ แต่จะต้องใช้วิธีการที่คงการแสดงภาพให้ถูกต้องมากขึ้นแทน
หากต้องการใช้เอฟเฟกต์นี้ ให้ใช้ image-rendering: pixelated; กับรูปภาพดังนี้
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
ลองใช้เดโม ดังที่คุณเห็น การใช้พร็อพเพอร์ตี้มีผลอย่างมากต่อวิธีแสดงผลรูปภาพ
พร็อพเพอร์ตี้นี้ใช้ในหลายๆ ที่ดังนี้
<img>องค์ประกอบ<canvas style="image-rendering: pixelated">องค์ประกอบ- องค์ประกอบที่มีพร็อพเพอร์ตี้
background-image
ยังไม่เข้าใจเลย ฉันควรใช้ฟีเจอร์นี้ที่ไหน
หากคุณแสดงเฉพาะรูปภาพในเว็บไซต์ คุณอาจไม่ต้องการตัวเลือกนี้
Use Case ที่ยอดเยี่ยมคือเกม คุณมักจะต้องปรับขนาดแคนวาสให้ใหญ่ขึ้นเพื่อให้พอดีกับขนาดหน้าจออย่างถูกต้อง ก่อนที่จะมีพร็อพเพอร์ตี้ CSS นี้เบราว์เซอร์จะปัดเศษภาพพิมพ์แคนวาสในลักษณะที่จะดูเบลอ (ดูด้านล่าง)
หากคุณกำลังสร้างเครื่องมือจองตั๋วเครื่องบินหรือแอปที่แสดงคิวอาร์โค้ด ผู้ใช้มักจะต้องการดูแบบเต็มหน้าจอเพื่อให้สแกนได้ง่ายขึ้น ดังนั้นการควบคุมการแสดงผลภาพจึงมีความสำคัญอย่างยิ่ง
หากสนใจดูการใช้งาน โปรดดูปัญหา 317991 (ปัญหานี้ยังเปิดอยู่เพื่อการใช้งานค่า "ขอบคมชัด" ให้ติดดาวปัญหาเพื่อติดตามการใช้งาน)