ในฐานะนักพัฒนาเว็บ เราทำงานกับรูปภาพตลอดเวลา และในกรณีส่วนใหญ่ เบราว์เซอร์จะเก่งมากในการปรับขนาดรูปภาพให้พอดีกับการออกแบบเว็บไซต์ของเราในขณะที่ยังคงรักษารูปภาพให้ดูสวยงามได้ แต่เกิดอะไรขึ้นเมื่อคุณต้องการควบคุมวิธีที่เบราว์เซอร์ปรับขนาดรูปภาพบนหน้าเว็บของคุณ
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
ยังไม่เข้าใจอยู่ดี ฉันควรใช้ที่ใด
หากเพียงแสดงรูปภาพในเว็บไซต์ของคุณ คุณอาจไม่ต้องการฟีเจอร์นี้
กรณีการใช้งานที่ยอดเยี่ยมคือเกมที่คุณจะต้องปรับขนาดผืนผ้าใบเพื่อให้มีขนาดพอดีกับหน้าจออย่างถูกต้องอยู่บ่อยๆ ก่อนหน้าคุณสมบัติ CSS นี้ เบราว์เซอร์จะทำการประมาณ Canvas ในลักษณะที่อาจเบลอ (ดูด้านล่าง [sic])
หากคุณกำลังสร้างเครื่องมือจำหน่ายตั๋วสายการบิน หรือแอปที่แสดงคิวอาร์โค้ด ผู้ใช้มักต้องการให้แสดงแบบเต็มหน้าจอเพื่อให้สแกนได้ง่ายขึ้น ดังนั้นการควบคุมการแสดงผลรูปภาพจึงเป็นสิ่งสำคัญ
หากคุณสนใจที่จะดูการติดตั้งใช้งาน โปรดชําระเงินในปัญหา 317991 (เปิดทิ้งไว้สําหรับการติดตั้งใช้งานค่าขอบที่คมชัด ติดดาวปัญหาเพื่อติดตามการติดตั้งใช้งาน)