รูปภาพ
เอกสารประกอบและตัวอย่างสำหรับการเลือกรูปภาพให้เป็นลักษณะการทำงานที่ตอบสนอง (ดังนั้นจึงไม่มีขนาดใหญ่กว่าองค์ประกอบหลัก) และเพิ่มสไตล์ที่ไม่ซับซ้อนให้กับรูปภาพ—ทั้งหมดผ่านคลาส
ภาพที่ตอบสนอง
รูปภาพใน Bootstrap นั้นตอบสนองด้วย.img-fluid
. max-width: 100%;
และheight: auto;
นำไปใช้กับรูปภาพเพื่อให้มีขนาดกับองค์ประกอบหลัก
<img src="..." class="img-fluid" alt="...">
ภาพ SVG และ Internet Explorer
ใน Internet Explorer 10 และ 11 รูปภาพ SVG ที่.img-fluid
มีขนาดไม่สมส่วน หากต้องการแก้ไขปัญหานี้ ให้เพิ่มwidth: 100%;
หรือ.w-100
เมื่อจำเป็น การแก้ไขนี้ปรับขนาดรูปแบบภาพอื่นๆ ไม่ถูกต้อง ดังนั้น Bootstrap จะไม่ปรับใช้โดยอัตโนมัติ
ภาพขนาดย่อ
นอกจากยูทิลิตี้รัศมีเส้นขอบ ของเรา แล้ว คุณสามารถใช้.img-thumbnail
เพื่อให้รูปภาพมีลักษณะเป็นขอบโค้งมน 1px
<img src="..." class="img-thumbnail" alt="...">
การจัดแนวภาพ
จัดแนวรูปภาพกับคลาส float ตัวช่วยหรือ คลาส การจัดตำแหน่งข้อความ block
ภาพระดับสามารถจัดกึ่งกลางโดยใช้ คลาส ยู.mx-auto
ทิลิ ตี้ระยะขอบ
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
รูปภาพ
หากคุณกำลังใช้<picture>
องค์ประกอบเพื่อระบุ<source>
องค์ประกอบหลายรายการสำหรับเฉพาะ<img>
ตรวจสอบให้แน่ใจว่าได้เพิ่ม.img-*
คลาสลง ในแท็ก <img>
และไม่ใช่ใน<picture>
แท็ก
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>