Bootstrap 4 รูปภาพ
Bootstrap 4 รูปร่างรูปภาพ
มุมโค้งมน:
วงกลม:
ภาพขนาดย่อ:
มุมโค้งมน
ชั้น.roundedเรียนเพิ่มมุมมนให้กับรูปภาพ:
ตัวอย่าง
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
วงกลม
ชั้น.rounded-circleเรียนกำหนดรูปเป็นวงกลม:
ตัวอย่าง
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
รูปขนาดย่อ
ชั้น.img-thumbnailเรียนกำหนดรูปเป็นภาพขนาดย่อ (มีขอบ):
ตัวอย่าง
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
การจัดตำแหน่งรูปภาพ
ลอยรูปภาพไปทางขวาด้วย.float-rightคลาสหรือทางซ้ายด้วย.float-left:
ตัวอย่าง
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
ภาพกึ่งกลาง
จัดกึ่งกลางรูปภาพโดยเพิ่มคลาสยูทิลิตี้.mx-auto(margin:auto) และ.d-block(display:block) ให้กับรูปภาพ:
ตัวอย่าง
<img src="paris.jpg" class="mx-auto d-block">
รูปภาพที่ตอบสนอง
รูปภาพมาในทุกขนาด หน้าจอก็เช่นกัน รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์จะปรับให้พอดีกับขนาดของหน้าจอโดยอัตโนมัติ
สร้างภาพที่ตอบสนองโดยการเพิ่ม.img-fluidคลาสให้กับ<img>แท็ก รูปภาพจะปรับขนาดอย่างสวยงามตามองค์ประกอบหลัก
คลาส.img-fluidใช้max-width: 100%;และ
height: auto;กับรูปภาพ:
ตัวอย่าง
<img class="img-fluid" src="img_chania.jpg" alt="Chania">