Bootstrap CSS รูปภาพอ้างอิง
Bootstrap รูปภาพ
มุมโค้งมน:
วงกลม:
ภาพขนาดย่อ:
<img> ชั้นเรียน
คลาสด้านล่างสามารถใช้เพื่อจัดรูปแบบรูปภาพใดก็ได้:
| Class | Description | Example |
|---|---|---|
| .img-rounded | Adds rounded corners to an image (not available in IE8) | |
| .img-circle | Shapes the image to a circle (not available in IE8) | |
| .img-thumbnail | Shapes the image to a thumbnail | |
| .img-responsive | Makes an image responsive (will scale nicely to the parent element) |
รูปภาพที่ตอบสนอง
สร้างภาพที่ตอบสนองโดยการเพิ่ม.img-responsiveคลาสให้กับ<img>แท็ก รูปภาพจะปรับขนาดอย่างสวยงามตามองค์ประกอบหลัก
คลาส.img-responsiveใช้max-width: 100%, height: auto, และdisplay:blockกับรูปภาพ:
ตัวอย่าง
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">