ในฐานะที่เป็นนักพัฒนาเว็บที่มีความเป็นไปได้สูงที่คุณได้พบทั้งสองศัตรูของบทความนี้: ภาพและกำหนดเวลา ในบางครั้งด้วยเหตุผลบางประการรูปภาพของคุณจะไม่พอดีกับเค้าโครงและคุณไม่ต้องการหมกมุ่นอยู่กับสิ่งนี้เป็นเวลาหลายชั่วโมง
สถานการณ์นี้เกิดขึ้นกับฉันหลายครั้งและฉันได้เรียนรู้จากความผิดพลาดของฉัน ไม่มีการแฮ็กมนต์ดำอีกต่อไปนี่คือห้าเทคนิคโปรดของฉันในการจัดการการปรับขนาดภาพ
วิธี“ OMG I NEED THIS ASAP”
เวลา 17.00 น. ของวันศุกร์คุณต้องทำหน้านี้ให้เสร็จ แต่รูปภาพจะไม่พอดีกับเค้าโครง ถึงเวลาใช้เล่ห์กลของคุณแล้ว!
.myImg { background-image: url("my-image.png"); background-size: cover; }เสียงที่คุ้นเคย? เราเคยทำมาแล้วครั้งหนึ่งรู้สึกเหมือนโกงคุณหรือเปล่า?
การใช้backgroundคุณสมบัติมีประโยชน์มาก แต่ก็ใช้ได้ผล อย่างไรก็ตามโปรดจำไว้ว่าคุณควรใช้รูปภาพที่ไม่ใช่เนื้อหาหรือใช้แทนข้อความและในบางกรณีเท่านั้น
หนทางจากอนาคต
จะเป็นอย่างไรถ้าฉันบอกคุณว่าเวทมนตร์ประเภทนี้มีอยู่สำหรับ
.myImg { object-fit: cover; width: 320px; height: 180px; }นั่นคือคนทั้งหมด! ดูว่าเมื่อเราดึงค่ามิตรมาใช้coverอย่างไรเราก็สามารถใช้ได้เช่นcontainกัน
ตกลงอะไรกับดัก?
น่าเสียดายที่object-fitจะใช้ไม่ได้กับ IE และ Safari เวอร์ชันเก่า แต่มี polyfill
วิธี“ Netflix”
คุณอาจคิดว่า“ คนหลอกลวงที่ดีอีกวิธีหนึ่งที่ใช้ไม่ได้กับเบราว์เซอร์รุ่นเก่าเช่น IE” ไม่ต้องกังวลอันนี้ใช้ได้ทุกที่และเป็นที่ชื่นชอบ! คุณจะต้องห่อรูปภาพของคุณด้วยผู้ปกครองที่มีเบาะรองญาติ
เราจะคงอัตราส่วนของรูปภาพไว้กับเปอร์เซ็นต์ของpaddingคุณสมบัติ ภาพของคุณจะเป็นเด็กขนาดเต็มแน่นอน
รหัสมีลักษณะดังนี้:
.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }“ เฮ้ผู้ชายมันดูซับซ้อน”
เมื่อคุณได้แนวคิดแล้วเทคนิคนี้ก็ง่ายและใช้กันอย่างแพร่หลาย Netflix ใช้มัน!
การสาธิตเล็กน้อย:
วิธีง่ายๆ
คุณอาจรู้จักสิ่งนี้แล้ว:
img { height: auto; width: 100%; /* even more control with max-width */ max-width: 720px; }หากเค้าโครงของคุณไม่ซับซ้อนเกินไปก็ใช้ได้ในกรณีส่วนใหญ่
วิธีการแสดง (ขั้นสูง)
ตามประสิทธิภาพฉันหมายถึงเวลาในการโหลด ภาพฮีโร่ขนาดใหญ่สามารถทำลายมันและทำให้เพจของคุณรู้สึกช้าโดยเฉพาะบนมือถือ
คุณรู้ไหมว่าในเบราว์เซอร์สมัยใหม่คุณสามารถเปลี่ยนแหล่งที่มาของรูปภาพได้ขึ้นอยู่กับความกว้างของหน้าเว็บของคุณ นั่นคือสิ่งที่srcsetสร้างขึ้นเพื่อ!
คุณสามารถรวมเข้ากับแท็กHTML 5 ซึ่งลดระดับลงอย่างมากด้วย
เพื่อสรุป
- ใช้
background-imageหากรูปภาพของคุณไม่ได้เป็นส่วนหนึ่งของเนื้อหาของเพจ - ใช้
object-fitถ้าคุณไม่สนใจ IE - เทคนิคตู้คอนเทนเนอร์ที่ใช้โดย Netflix ใช้งานได้ทุกที่
- ในกรณีส่วนใหญ่เพียงแค่เพิ่ม
height: auto;CSS ของคุณ - หากคุณต้องการเวลาในการโหลดที่รวดเร็วให้ใช้
srcsetเพื่อโหลดภาพขนาดเล็กบนมือถือ