วิธีการ - รูปภาพที่ตอบสนอง
เรียนรู้วิธีสร้างภาพที่ตอบสนองด้วย CSS
รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์จะปรับให้พอดีกับขนาดของหน้าจอโดยอัตโนมัติ
ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูผลตอบสนอง:
วิธีการสร้างภาพที่ตอบสนอง
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<img src="nature.jpg" alt="Nature" class="responsive">
ขั้นตอนที่ 2) เพิ่ม CSS:
หากคุณต้องการให้รูปภาพปรับขนาดขึ้นและลงตามการตอบสนอง ให้ตั้งค่าwidth
คุณสมบัติ CSS เป็น 100% และheight
เป็นอัตโนมัติ:
ตัวอย่าง
.responsive {
width: 100%;
height: auto;
}
If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%
:
Example
.responsive {
max-width: 100%;
height: auto;
}
If you want to restrict a responsive image to a maximum size, use the max-width
property, with a
pixel value of your choice:
Example
.responsive {
width: 100%;
max-width:
400px;
height: auto;
}
Go to our CSS Images Tutorial to learn more about how to style images.
Go to our CSS RWD Tutorial to learn more about responsive web design.