ในฐานะนักพัฒนาเว็บ เราเล่นกับรูปภาพอยู่ตลอด และในกรณีส่วนใหญ่ เบราว์เซอร์จะปรับขนาดรูปภาพให้พอดีกับขอบเขตของการออกแบบเว็บไซต์ของเราได้ในขณะที่ยังคงรูปภาพให้ดูดีอยู่ แต่จะเกิดอะไรขึ้นเมื่อคุณต้องการควบคุมวิธีที่เบราว์เซอร์ปรับขนาดรูปภาพในหน้าเว็บ
Chrome 41 (เบต้าในเดือนมกราคม 2015) เปิดตัวพร็อพเพอร์ตี้ CSS ใหม่ image-rendering: pixelated (ข้อมูลจำเพาะ) ที่ช่วยให้คุณควบคุมวิธีที่เบราว์เซอร์แสดงผลรูปภาพที่ปรับขนาดขึ้นได้มากขึ้น
พร็อพเพอร์ตี้ CSS image-rendering และค่า pixelated น่าสนใจเนื่องจากจะปิดการปรับขนาดแบบเรียบมาตรฐานของเบราว์เซอร์ (ปกติจะเป็นการปรับขนาดแบบเชิงเส้นคู่) และแทนที่ด้วยอัลกอริทึมการปรับขนาดอื่น (การปรับขนาดแบบเพื่อนบ้านที่ใกล้ที่สุดในส่วนใหญ่) เมื่อปรับขนาดรูปภาพ
ลองจินตนาการว่าคุณมีรูปภาพขนาด 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 (ปัญหานี้ยังเปิดอยู่เพื่อการใช้งานค่า "ขอบคมชัด" ให้ติดดาวปัญหาเพื่อติดตามการใช้งาน)