รูปภาพ
เอกสารประกอบและตัวอย่างสำหรับการเลือกรูปภาพให้เป็นลักษณะการทำงานที่ตอบสนอง (ดังนั้นจึงไม่มีขนาดใหญ่กว่าองค์ประกอบหลัก) และเพิ่มสไตล์ที่ไม่ซับซ้อนให้กับรูปภาพ—ทั้งหมดผ่านคลาส
รูปภาพใน Bootstrap นั้นตอบสนองด้วย.img-fluid
. max-width: 100%;
และheight: auto;
นำไปใช้กับรูปภาพเพื่อให้มีขนาดกับองค์ประกอบหลัก
ภาพ SVG และ IE 10
In Internet Explorer 10, SVG images with .img-fluid
are disproportionately sized. To fix this, add width: 100% \9;
where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.
In addition to our border-radius utilities, you can use .img-thumbnail
to give an image a rounded 1px border appearance.
Align images with the helper float classes or text alignment classes. block
-level images can be centered using the .mx-auto
margin utility class.
หากคุณกำลังใช้<picture>
องค์ประกอบเพื่อระบุ<source>
องค์ประกอบหลายรายการสำหรับเฉพาะ<img>
ตรวจสอบให้แน่ใจว่าได้เพิ่ม.img-*
คลาสลง ในแท็ก <img>
และไม่ใช่ใน<picture>
แท็ก