วิธีที่จะสร้าง: ภาพที่ตอบสนองได้

วิธีที่จะสร้างภาพที่ตอบสนองได้

ขั้นที่หนึ่ง - เพิ่ม HTML:

<img src="nature.jpg" alt="Nature" class="responsive">

ขั้นที่สอง - เพิ่ม CSS:

ถ้าคุณต้องการให้ภาพที่ตอบสนองได้ของคุณสามารถขยายและย่อได้ ให้กำหนดความยาว CSS width คุณสมบัติถูกจัดตั้งเป็น 100%,height จัดตั้งเป็น auto:

ตัวอย่าง

.responsive {
  width: 100%;
  height: auto;
}

ทดสอบด้วยตัวเอง

ถ้าคุณต้องการให้ภาพถูกย่อลงเมื่อมีความจำเป็น แต่ไม่เข้าใจในการขยายขนาดใหญ่กว่าขนาดต้นฉบับ ใช้ max-width: 100%:

ตัวอย่าง

.responsive {
  max-width: 100%;
  height: auto;
}

ทดสอบด้วยตัวเอง

ถ้าคุณต้องการจำกัดขนาดภาพที่ตอบสนองได้ของคุณให้เป็นขนาดสูงสุด ใช้ max-width คุณสมบัติและค่าพิกษุปิกซ์ที่คุณเลือก:

ตัวอย่าง

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

ทดสอบด้วยตัวเอง

เพจที่เกี่ยวข้อง

教程：CSS 图像

教程：CSS 响应式网页设计