แท็ก <img>
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
การตั้งค่าแอตทริบิวต์ width
และ height
ในแท็ก <img>
จะช่วยป้องกันการเปลี่ยนเลย์เอาต์ ข้อมูลนี้ช่วยให้เบราว์เซอร์สามารถจองพื้นที่สำหรับรูปภาพได้อย่างถูกต้อง
ตั้งค่าแอตทริบิวต์ width
และ height
: ค่าของแอตทริบิวต์เหล่านี้ควรตั้งค่าให้ตรงกับขนาดของรูปภาพ (ซึ่งก็คือขนาดภายใน) ไม่ใช่ขนาดที่จะแสดงรูปภาพ
ปรับการจัดรูปแบบรูปภาพตามความจำเป็น: การเพิ่มแอตทริบิวต์ width
และ height
อาจทำให้รูปภาพแสดงผลแตกต่างกัน ทั้งนี้ขึ้นอยู่กับการจัดรูปแบบที่มีอยู่ของรูปภาพ ในหลายๆ กรณี ปัญหานี้แก้ไขได้ด้วยการเพิ่ม height: auto
หรือ width: auto
ลงในการจัดรูปแบบที่มีอยู่
การจัดรูปแบบ CSS ก่อนหน้า |
เปลี่ยนเป็น |
img { width: 100%; } |
img { width: 100%; height: auto; } |
img { max-width: 100%; } |
img { max-width: 100% height: auto; } |
img { height: 100%; } |
img { height: 100%; width: auto } |
HTML
<img width="267" height="400" src="dog.jpg">
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2024-03-13 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2024-03-13 UTC"],[],[]]