สอนใช้งาน Bootstrap 4

Bootstrap 4 Image การทำงานกับรูปภาพ

ใน Bootstrap 4 มีเครื่องมือและคลาสที่ช่วยในการจัดการกับรูปภาพ (Image) ให้สามารถแสดงผลได้อย่างมีประสิทธิภาพและรองรับการแสดงผลในทุกขนาดหน้าจอ

รูปภาพที่ตอบสนอง (Responsive Images)

Bootstrap มีคลาส .img-fluid ที่สามารถทำให้รูปภาพปรับขนาดตามความกว้างของหน้าจออุปกรณ์ได้อย่างอัตโนมัติ รูปภาพจะมีความกว้างสูงสุดที่ 100% ของคอนเทนเนอร์ และจะปรับขนาดลงตามขนาดของหน้าจอ

HTML
<img src="path-to-image.jpg" class="img-fluid" alt="Responsive image">

ผลลัพธ์: รูปภาพจะปรับขนาดตามขนาดของหน้าจอ แต่ยังคงรักษาอัตราส่วนของภาพเดิมไว้

การจัดรูปภาพให้มีลักษณะกลม (Rounded Image)

คลาส .rounded จะทำให้รูปภาพมีขอบโค้งมน (Radius) ช่วยให้ภาพมีลักษณะนุ่มนวล

HTML
<img src="path-to-image.jpg" class="rounded" alt="Rounded image">

ผลลัพธ์: รูปภาพจะมีขอบโค้งมน แต่ไม่เป็นทรงกลม

รูปภาพทรงกลม (Circle Image)

ถ้าต้องการให้รูปภาพเป็นทรงกลม สามารถใช้คลาส .rounded-circle ได้ คลาสนี้จะทำให้รูปภาพมีขอบโค้งแบบวงกลม

HTML
<img src="path-to-image.jpg" class="rounded-circle" alt="Circle image">

ผลลัพธ์: รูปภาพจะถูกแสดงเป็นทรงกลม

การใส่กรอบให้กับรูปภาพ (Image with Border)

หากต้องการเพิ่มกรอบให้กับรูปภาพ สามารถใช้คลาส .img-thumbnail ซึ่งจะเพิ่มกรอบขนาดเล็กและทำให้รูปภาพมีขอบมุมเล็กน้อย

HTML
<img src="path-to-image.jpg" class="img-thumbnail" alt="Image with border">

ผลลัพธ์: รูปภาพจะมีกรอบและมุมโค้งเล็กน้อย

การจัดตำแหน่งรูปภาพ (Aligning Images)

Bootstrap มีคลาสสำหรับจัดตำแหน่งรูปภาพได้ทั้งซ้าย กลาง และขวา สามารถใช้คลาสเหล่านี้เพื่อจัดการตำแหน่งของรูปภาพ:

  • .float-left สำหรับจัดตำแหน่งรูปภาพทางซ้าย
  • .float-right สำหรับจัดตำแหน่งรูปภาพทางขวา
  • .mx-auto และ d-block สำหรับจัดตำแหน่งรูปภาพไว้ตรงกลาง
HTML
<img src="path-to-image.jpg" class="float-left" alt="Left aligned image">
<img src="path-to-image.jpg" class="float-right" alt="Right aligned image">
<img src="path-to-image.jpg" class="mx-auto d-block" alt="Center aligned image">

ผลลัพธ์: รูปภาพจะถูกจัดตำแหน่งตามที่กำหนด

การจัดการกับรูปภาพใน Card

Bootstrap 4 รองรับการใช้งานรูปภาพใน Card สามารถแทรกรูปภาพไว้ด้านบน ด้านล่าง หรือภายในคอนเทนต์ของ Card ได้โดยการใช้คลาส .card-img-top, .card-img-bottom หรือ .card-img ตามลำดับ

HTML
<div class="card" style="width: 18rem;">
  <img src="path-to-image.jpg" class="card-img-top" alt="Card image top">
  <div class="card-body">
    <p class="card-text">Some example text.</p>
  </div>
</div>

ผลลัพธ์: รูปภาพจะอยู่ด้านบนของ Card และจะปรับขนาดตาม Card โดยอัตโนมัติ

การใช้รูปภาพแบบ Background

หากต้องการใช้รูปภาพเป็น Background สามารถทำได้ผ่านการใช้ CSS แต่ Bootstrap ก็ยังช่วยในการจัดรูปภาพ Background ให้ตอบสนองได้ดีด้วยการใช้คลาสในกรอบหรือคอนเทนเนอร์ต่างๆ เช่น .bg-* เพื่อเปลี่ยนสีพื้นหลัง หรือใช้การจัดการขนาดและตำแหน่งรูปภาพใน Background

HTML
<div class="p-5 bg-light" style="background-image: url('path-to-image.jpg'); background-size: cover;">
  <h1>Text on background image</h1>
</div>

ผลลัพธ์: จะได้พื้นที่ที่มีรูปภาพเป็น Background และข้อความซ้อนทับอยู่

การใช้รูปภาพร่วมกับ Media Object

Bootstrap มีระบบ Media Object ที่ใช้สำหรับการจัดรูปภาพหรือเนื้อหาแบบเป็นสื่อ โดยสามารถวางรูปภาพไว้ด้านซ้ายหรือด้านขวาของเนื้อหา

HTML
<div class="media">
  <img src="path-to-image.jpg" class="mr-3" alt="Media image" style="width: 64px;">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Content goes here.
  </div>
</div>

ผลลัพธ์: จะได้รูปแบบการจัดวางรูปภาพและเนื้อหาแบบสื่อที่มีการจัดตำแหน่งสวยงาม

สรุป

การใช้งานรูปภาพใน Bootstrap 4 มีความยืดหยุ่นและสามารถประยุกต์ใช้ได้หลายรูปแบบ ตั้งแต่การทำให้รูปภาพตอบสนองต่อขนาดหน้าจอ การจัดตำแหน่งรูปภาพ การเพิ่มกรอบ และการใช้รูปภาพใน Media Object หรือ Card การเลือกใช้คลาสที่ถูกต้องจะช่วยให้การจัดการกับรูปภาพในเว็บไซต์มีความสวยงามและตอบสนองต่อผู้ใช้ได้ดี

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ