กำหนดให้รูปภาพย่อ-ขยายอัตโนมัติตามขนาดหน้าจอด้วย CSS

wave
มานพ กองอุ่น 9 ก.ค. 2018, 20:20:08 3,338

สำหรับบทเรียนรู้นี้เป็นการกำหนดให้รูปภาพย่อขยายอัตโนมัติตามขนาดหน้าจอที่เปิด โดยกำหนดดังนี้

<div class="page-content">
    <img src="path/to/image.jpg" />
</div>

ใน css จะเขียนดังต่อไปนี้

.page-content img {
    max-width: 100%;
    height: auto!important;
}

 


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com
รายละเอียด
  • ดู 3,338
  • รักเลย 0
  • หมวดหมู่ CSS
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags css image max-width
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009