ในภาษามาร์กอัปไฮเปอร์เท็กซ์ (HTML) จะใช้คำสั่งพิเศษ “แท็ก” เพื่อแสดงรูปภาพบนหน้า แท็กนี้เรียกว่า img และมีชุดของตัวแปร - "แอตทริบิวต์" ด้วยความช่วยเหลือของแอตทริบิวต์ คุณสามารถกำหนดทุกแง่มุมของการแสดงรูปภาพในหน้าไฮเปอร์เท็กซ์ รวมถึงขนาด อย่างไรก็ตาม นี่ไม่ใช่วิธีเดียวในการแก้ปัญหา คุณยังสามารถลดขนาดของรูปภาพได้โดยใช้ Cascading Style Sheets (CSS)
คำแนะนำ
ขั้นตอนที่ 1
วางแอตทริบิวต์ความสูงและความกว้างในแท็กที่รับผิดชอบในการแสดงภาพที่ต้องการ ตั้งค่าอันแรกเป็นขนาดแนวตั้งของรูปภาพ และอันที่สองในแนวนอน ตั้งค่าตัวเลขทั้งสองเป็นพิกเซล แต่ไม่จำเป็นต้องระบุหน่วย - px - ที่นี่ เมื่อคำนวณค่าที่จำเป็นสำหรับคุณลักษณะเหล่านี้ ให้ความสนใจกับการปฏิบัติตามสัดส่วนของการลดขนาดภาพ มิฉะนั้น จะแสดงในรูปแบบบิดเบี้ยว ตัวอย่างเช่น หากต้องการใส่รูปภาพที่แบ่งครึ่งจากไฟล์ชื่อ SomePic.
ขั้นตอนที่ 2
คุณสามารถตั้งค่าการลดขนาดภาพต้นฉบับตามสัดส่วนเป็นเปอร์เซ็นต์ได้ เมื่อต้องการทำเช่นนี้ ใช้เฉพาะแอตทริบิวต์ความสูงโดยไม่ระบุความกว้าง และเพิ่มเครื่องหมายเปอร์เซ็นต์หลังจากระบุขนาดที่กำหนดตัวเลข ตัวอย่างเช่น คุณสามารถบรรลุผลเช่นเดียวกับในตัวอย่างจากขั้นตอนก่อนหน้านี้ด้วยแท็กที่เขียนในรูปแบบนี้:
ขั้นตอนที่ 3
หากคุณต้องการระบุขนาดของรูปภาพโดยใช้คำอธิบายของสไตล์ ให้ใช้ชื่อแท็กเดียวกัน - img - และแอตทริบิวต์ - ความกว้างและความสูง ในกรณีนี้ ต้องระบุหน่วยของการวัด - px, pt หรือ% - เสมอ หากต้องการกำหนดขนาดรูปภาพทั้งหมดครึ่งหนึ่งให้ลดลงครึ่งหนึ่งในหน้าเว็บ ให้วางรายการต่อไปนี้ในบล็อกคำอธิบายรูปแบบ: img {ความสูง: 50%;} หากคุณต้องการลดขนาดเพียงภาพเดียว ให้เพิ่มแอตทริบิวต์ id เพิ่มเติม ให้กับแท็กและกำหนดค่าที่ไม่ซ้ำกันให้กับรูปภาพของค่าหน้านี้ - ตัวอย่างเช่น PicOne: เพิ่มค่าเดียวกันให้กับระเบียนรูปแบบ โดยคั่นด้วย "แฮช" # จากชื่อแท็ก คำอธิบายสไตล์ที่สมบูรณ์ในกรณีนี้อาจมีลักษณะดังนี้: img # OnePic {ความสูง: 50%;}
