เทคนิค CSS ที่ประหยัดเวลาในการสร้างภาพที่ตอบสนอง

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

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

วิธี“ 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 ซึ่งลดระดับลงอย่างมากด้วยไฟล์.

เพื่อสรุป

  1. ใช้background-image หากรูปภาพของคุณไม่ได้เป็นส่วนหนึ่งของเนื้อหาของเพจ
  2. ใช้object-fitถ้าคุณไม่สนใจ IE
  3. เทคนิคตู้คอนเทนเนอร์ที่ใช้โดย Netflix ใช้งานได้ทุกที่
  4. ในกรณีส่วนใหญ่เพียงแค่เพิ่มheight: auto;CSS ของคุณ
  5. หากคุณต้องการเวลาในการโหลดที่รวดเร็วให้ใช้srcsetเพื่อโหลดภาพขนาดเล็กบนมือถือ