ขนาดของรูปภาพบนหน้าเว็บดูเหมือนจะเหมือนกัน ในหน้าบทความที่พบบ่อยที่สุดที่มีรูปภาพหลายภาพขนาดของภาพมักจะเท่ากับความกว้างของหน้า ด้วยวิธีนี้หน้าดูเหมือนรูปร่างทรงกระบอกตรง หากคุณเห็นเค้าโครงนี้มากเกินไปคุณจะรู้สึกซ้ำซากมาก ฉันคิดว่าสถานการณ์นี้ส่วนใหญ่เกิดจากข้อ จำกัด ของเบราว์เซอร์สมัยเก่า อย่างไรก็ตามด้วยความนิยมของเบราว์เซอร์ที่ทันสมัย (Firefox/Google/IE11) เบราว์เซอร์มีข้อ จำกัด น้อยลงและน้อยลงในการออกแบบหน้าและจินตนาการของโปรแกรมเมอร์เว็บสามารถออกแรงได้อย่างมาก
ตัวอย่างเช่น Leng Zhi: คุณรู้หรือไม่ว่า [x] ทุกหน้าต่างมาจากไหน? ในบทความนี้รูปภาพจำนวนมากเกินขีด จำกัด ของความกว้างของข้อความทำให้ผู้คนรู้สึกถึงการส่ายและส่าย ในเวลาเดียวกันภาพขนาดใหญ่จะแสดงในขนาดที่แท้จริงทำให้ผู้คนรู้สึกตกใจมากขึ้น
แต่ในทางเทคนิคแล้วเราสามารถ จำกัด ภาพได้อย่างง่ายดายด้วยความกว้างสูงสุดของข้อความเพื่อให้พวกเขาทั้งหมดรักษาความกว้างและเมื่อเราไม่ทำตามความกว้างของข้อความเราต้องการขนาดของแต่ละภาพ เราสามารถประกาศขนาดดั้งเดิมของภาพเมื่อแก้ไขบนเซิร์ฟเวอร์ วิธีที่ยืดหยุ่นมากขึ้นคือการรับขนาดดั้งเดิมของภาพแบบไดนามิกโดยการวางชิ้นส่วนของ JS ไว้บนหน้าและเปลี่ยนขนาดการแสดงผลของภาพแบบไดนามิก สิ่งนี้เข้ากันได้กับความกว้างสูงสุดของข้อความเก่าและยังสามารถทำให้รูปภาพปรากฏขนาดเดิมเมื่อจำเป็น
วิธีรับขนาดดั้งเดิมของภาพทางด้านเบราว์เซอร์โดยใช้ JavaScript?
การคัดลอกรหัสมีดังนี้:
var img = $ ("#img_id"); // รับ img elem ของฉัน
var pic_real_width, pic_real_height;
$ ("<img/>") // ทำในหน่วยความจำสำเนาของภาพเพื่อหลีกเลี่ยงปัญหา CSS
.ATTR ("SRC", $ (IMG) .ATTR ("SRC")))
.load (function () {
pic_real_width = this.width; // หมายเหตุ: $ (นี่) .width () จะไม่
pic_real_height = this.height; // ทำงานในภาพหน่วยความจำ
-
WebKit เบราว์เซอร์ (Google Chrome ฯลฯ ) สามารถรับค่าความสูงและความกว้างได้หลังจากเหตุการณ์ที่โหลดของภาพ ดังนั้นคุณไม่สามารถใช้ฟังก์ชั่นการหมดเวลาเพื่อรอล่าช้าวิธีที่ดีที่สุดคือใช้เหตุการณ์ ONLOAD ของภาพ
เพื่อหลีกเลี่ยงผลกระทบของ CSS ต่อขนาดของภาพรหัสด้านบนจะคัดลอกภาพไปยังหน่วยความจำสำหรับการคำนวณ
หากเพจของคุณเป็นหน้าแบบเก่าคุณสามารถฝังรหัสนี้ไว้ที่ด้านล่างของหน้าตามต้องการและไม่จำเป็นต้องแก้ไขหน้าต้นฉบับ