เรารู้ว่าหากปล่อยให้งานสร้างภาพขนาดย่อเป็นหน้าที่ของโปรแกรม ผลลัพธ์ที่ได้จะดีกว่ามาก อย่างไรก็ตาม บางครั้งเนื่องจากปัจจัยบางประการ เช่น เซิร์ฟเวอร์ไม่รองรับ GD จึงหลีกเลี่ยงไม่ได้ที่จะขอให้ CSS ทำเพื่อคุณ
หากต้องการลดขนาดรูปภาพขนาดใหญ่ให้เหลือขนาดที่ต้องการ สำหรับเบราว์เซอร์สมัยใหม่ เพียงใช้คุณสมบัติ CSS ความกว้างสูงสุดและความสูงสูงสุด
สำหรับ IE 6.0 และต่ำกว่า คุณสมบัติ CSS สองรายการข้างต้นจะถูกละเว้น เพื่อจัดการกับสิ่งนี้ก่อนหน้านี้ เรามักจะหันไปใช้ Javascript แล้วจึงเพิ่มเหตุการณ์ onload ให้กับรูปภาพ ตัวอย่างเช่น:
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<scripttype="text/javascript">
functionresizeImage (obj) {
obj.width=obj.width>50&&obj.width>obj.height?50:อัตโนมัติ;
obj.height=obj.height>50?50:อัตโนมัติ;
-
</สคริปต์>
วิธีนี้สามารถแก้ปัญหาได้อย่างแน่นอน แต่จะทำให้เกิดปัญหาเมื่ออัปเกรดหน้าในอนาคต เนื่องจากเบราว์เซอร์ปรับปรุงการรองรับ CSS ไม่ช้าก็เร็วเราจะลบกิจกรรม onload ทั้งหมดออกจากรูปภาพ ถึงเวลาแสดงของ Expression เนื่องจาก IE รองรับการวางสคริปต์บางตัวใน CSS ผ่าน Expression และสคริปต์นี้ใช้ได้กับ IE 6.0 และต่ำกว่าเท่านั้น จึงเหมาะที่จะเขียนลงใน Expression
สุดท้าย หากต้องการลดขนาดรูปภาพขนาดใหญ่ให้เหลือไม่เกิน 50px*50px คุณสามารถอ้างอิงถึง CSS ต่อไปนี้:
.thumbImage{
ความกว้างสูงสุด:50px;
ความสูงสูงสุด: 50px;
-
*html.thumbImage{
ความกว้าง:การแสดงออก(this.width>50&&this.width>this.height?50:อัตโนมัติ);
ความสูง:การแสดงออก(this.height>50?50:อัตโนมัติ);
-
