เรา (โดยเฉพาะมือใหม่อย่างฉัน) มักจะประสบปัญหา - การปรับภาพ ปัญหานี้เป็นเรื่องธรรมดามาก ในส่วนของบทความและฟอรั่ม อาจกล่าวได้ว่าทุกที่ที่ต้องอัพโหลดรูปภาพ ปัญหานี้ก็มีอยู่ และมีคนถามถึงเป็นระยะๆ ในฟอรั่ม ทำไม เหตุผลง่ายๆ ก็คือ เราไม่สามารถกำหนดให้บรรณาธิการเว็บหรือสมาชิกฟอรัมของคุณสามารถครอบตัดรูปภาพหรือเข้าใจโค้ด html พื้นฐานที่สุดได้ แม้ว่าจะไม่มีเนื้อหาทางเทคนิคมากนักก็ตาม
โซลูชันก่อนหน้านี้ใช้งานโดยใช้ js เป็นหลัก แต่ใครก็ตามที่เคยใช้จะรู้ดีว่าวิธีนี้ค่อนข้างยุ่งยาก อีกวิธีหนึ่งคือการกำหนด over-flow:hidden ในคอนเทนเนอร์ภายนอก แต่วิธีนี้จะตัดเฉพาะภาพและจะไม่นำไปใช้โดยอัตโนมัติ
การเกิดขึ้นของวิธีการต่อไปนี้น่าจะต้องขอบคุณ CSS2.0 ที่ยอดเยี่ยมและ Microsoft ที่ยิ่งใหญ่กว่า (หากไม่มีก็ไม่จำเป็นต้องมีโค้ดแบบละเอียดเช่นนี้ ^_^) ฉันผ่านการทดสอบบน ie6.0, ff1.5, opera7.0 ภายใต้ winXP เท่านั้น ฉันหวังว่าจะใช้บทความนี้เพื่อสร้างแรงบันดาลใจให้กับผู้อื่น และหวังว่าผู้เชี่ยวชาญจะสามารถให้คำแนะนำได้มากขึ้น สิ่งสำคัญคือ: max-width:780px; และบรรทัดด้านล่าง
การปรับพิกเซลคงที่:
เรียกใช้กล่องรหัส
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=gb2312 /> <title>css2.0 VS เช่น</title> <style type=text/css> <!-- body { ขนาดตัวอักษร: 12px; text-align: center; รูป { ระยะขอบ: 0 อัตโนมัติ; ความกว้าง: 800px; การขยาย: 0; เส้นขอบ: 1px ทึบ # 333; width:expression(document.body.clientWidth > 780? 780px: auto ); เส้นขอบ: 1px ประ #000; } --> </style> </head> <body> <div id=pic> <img src=http //www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=ขอบคุณ blueidea สำหรับรูปภาพที่ลิงก์ด่วน! /> </div> </body> </html>
[Ctrl+A เลือกเคล็ดลับทั้งหมด: คุณสามารถแก้ไขบางส่วนของโค้ดก่อนแล้วจึงกด Run]
เปอร์เซ็นต์การปรับตัว:
เรียกใช้กล่องรหัส
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=gb2312 /> <title>css2.0 VS เช่น</title> <style type=text/css> <!-- body { ขนาดตัวอักษร: 12px; text-align: center; รูป { ระยะขอบ: 0 อัตโนมัติ; ความกว้าง: 0%; เส้นขอบ: 1px ทึบ # 333; width:expression(document.body.clientWidth>document.getElementById(pic).scrollWidth*8/10? 80%: auto ); เส้นขอบ: 1px ประ #000; } --> </style> </head> <body > <div id=pic> <img src=http://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=ขอบคุณ blueidea สำหรับรูปภาพ hotlink! /> </div> </body> </html>
[Ctrl+A เลือกเคล็ดลับทั้งหมด: คุณสามารถแก้ไขบางส่วนของโค้ดก่อนแล้วจึงกด Run]
เตือน:
1 วิธีการนี้ไม่ได้มีไว้สำหรับ img เท่านั้น
2 ความกว้างสูงสุด, ความสูงสูงสุด, ความกว้างขั้นต่ำ, ความสูงขั้นต่ำ
ความรู้เบื้องต้นเกี่ยวกับการใช้นิพจน์ใน CSSผู้เขียน: dozb
คำนิยาม
IE5 และเวอร์ชันที่ใหม่กว่ารองรับการใช้นิพจน์ใน CSS เพื่อเชื่อมโยงคุณสมบัติ CSS กับนิพจน์ Javascript คุณสมบัติ CSS ที่นี่อาจเป็นคุณสมบัติโดยธรรมชาติขององค์ประกอบหรือคุณสมบัติที่กำหนดเอง กล่าวคือแอตทริบิวต์ CSS สามารถตามด้วยนิพจน์ Javascript และค่าของแอตทริบิวต์ CSS จะเท่ากับผลลัพธ์ของการคำนวณนิพจน์ Javascript คุณสามารถอ้างอิงคุณสมบัติและวิธีการขององค์ประกอบได้โดยตรงในนิพจน์ หรือใช้ออบเจ็กต์เบราว์เซอร์อื่น นิพจน์นี้เหมือนกับว่ามันอยู่ในฟังก์ชันสมาชิกขององค์ประกอบนี้
กำหนดค่าให้กับคุณลักษณะที่แท้จริงขององค์ประกอบ
ตัวอย่างเช่น คุณสามารถวางตำแหน่งองค์ประกอบตามขนาดของเบราว์เซอร์ได้
#myDiv {
ตำแหน่ง: แน่นอน;
ความกว้าง: 100px;
ความสูง: 100px;
ซ้าย: นิพจน์ (document.body.offsetWidth - 110 + px);
ด้านบน: นิพจน์ (document.body.offsetHeight - 110 + px);
พื้นหลัง: สีแดง;
-
กำหนดค่าให้กับองค์ประกอบแอตทริบิวต์ที่กำหนดเอง
ตัวอย่างเช่น กำจัดกล่องจุดสำหรับลิงก์บนหน้า
แนวทางปกติคือ:
<a href=link1.htm onfocus=this.blur()>link1</a>
<a href=link2.htm onfocus=this.blur()>link2</a>
<a href=link3.htm onfocus=this.blur()>link3</a>
เมื่อมองแวบแรก ข้อดีของการใช้นิพจน์อาจไม่ชัดเจน แต่หากมีลิงก์หลายสิบหรือหลายร้อยลิงก์บนเพจของคุณ คุณจะยังใช้ Ctrl+C และ Ctrl+V ในทางกลไกหรือไม่ ไม่ต้องพูดถึงทั้งสองลิงก์เลย สร้างรหัสซ้ำซ้อนมากขึ้นหรือไม่
วิธีใช้นิพจน์มีดังนี้:
<ประเภทสไตล์=ข้อความ/css>
{ดาว : การแสดงออก(onfocus=this.blur)}
</สไตล์>
<a href=link1.htm>link1</a>
<a href=link2.htm>link2</a>
<a href=link3.htm>link3</a>
แสดงให้เห็น:
ดาวที่อยู่ข้างในเป็นแอตทริบิวต์ที่กำหนดได้เอง คุณสามารถกำหนดได้ตามที่คุณต้องการ จากนั้นคำสั่งที่อยู่ใน expression() จะเป็นสคริปต์ JS อย่าลืมใส่เครื่องหมายคำพูดระหว่างแอตทริบิวต์ที่กำหนดเองและนิพจน์ เพราะโดยพื้นฐานแล้ว มันยังคงเป็น CSS ดังนั้นจึงวางไว้ในแท็กสไตล์ ไม่ใช่สคริปต์ ตกลง ดังนั้นจึงเป็นเรื่องง่ายที่จะกำจัดกล่องจุดลิงก์ในหน้าในหนึ่งประโยค แต่อย่านิ่งนอนใจ หากเอฟเฟกต์พิเศษเกิดขึ้นจากการเปลี่ยนแปลงแอตทริบิวต์ CSS ผลลัพธ์จะแตกต่างจากความตั้งใจเดิมของคุณ ตัวอย่างเช่น หากคุณต้องการเปลี่ยนสีของกล่องข้อความบนหน้าเมื่อเมาส์เลื่อนเข้าและออก คุณอาจคิดว่าควรเขียนเป็นปกติว่า
/* ข้อความต้นฉบับอ่านไม่ออก ฉันไม่มีเวลาแก้ไข ขออภัย!*/
แต่ผลลัพธ์ที่ได้คือสคริปต์เกิดข้อผิดพลาด วิธีเขียนที่ถูกต้องคือการเขียนคำจำกัดความของสไตล์ CSS ลงในฟังก์ชัน ดังที่แสดงด้านล่าง:
<ประเภทสไตล์=ข้อความ/css>
อินพุต {ดาว: นิพจน์ (onmouseover=function()
{this.style.พื้นหลังสี=#FF0000},
onmouseout=function(){this.style.พื้นหลังสี=#FFFFFF}) }
</สไตล์>
<ประเภทอินพุต=ข้อความ>
<ประเภทอินพุต=ข้อความ>
<ประเภทอินพุต=ข้อความ>
สังเกต:
ไม่จำเป็นมากนัก โดยทั่วไปไม่แนะนำให้ใช้นิพจน์เนื่องจากนิพจน์ต้องใช้ทรัพยากรเบราว์เซอร์ค่อนข้างสูง