in English
รูปภาพ
เอกสารประกอบและตัวอย่างสำหรับการเลือกรูปภาพให้เป็นลักษณะการทำงานที่ตอบสนอง (ดังนั้นจึงไม่มีขนาดใหญ่กว่าองค์ประกอบหลัก) และเพิ่มสไตล์ที่ไม่ซับซ้อนให้กับรูปภาพ—ทั้งหมดผ่านคลาส
ในหน้านี้
ภาพที่ตอบสนอง
รูปภาพใน Bootstrap นั้นตอบสนองด้วย.img-fluid
. สิ่งนี้ใช้max-width: 100%;
และheight: auto;
กับรูปภาพเพื่อให้ปรับขนาดด้วยองค์ประกอบหลัก
<img src="..." class="img-fluid" alt="...">
ภาพขนาดย่อ
นอกจากยูทิลิตี้รัศมีเส้นขอบ ของเรา แล้ว คุณสามารถใช้.img-thumbnail
เพื่อให้รูปภาพมีลักษณะเป็นขอบโค้งมน 1px
<img src="..." class="img-thumbnail" alt="...">
การจัดแนวภาพ
จัดแนวรูปภาพกับคลาส float ตัวช่วยหรือ คลาส การจัดตำแหน่งข้อความ block
ภาพระดับสามารถจัดกึ่งกลางโดยใช้ คลาส ยู.mx-auto
ทิลิ ตี้ระยะขอบ
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" 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>
ซาส
ตัวแปร
มีตัวแปรสำหรับภาพขนาดย่อ
$thumbnail-padding: .25rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-width: $border-width;
$thumbnail-border-color: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;