ภาพบูต
ในบทนี้เราจะเรียนรู้การสนับสนุนเงินทุนสำหรับภาพ เงินทุนให้สามสามารถนำไปใช้ภาพระดับสไตล์เรียบง่าย
- .img-rounded:เพิ่มborder-radius: 6pxที่จะได้รับเนื้อภาพ
- .img วงกลม:เพิ่มborder-radius: 50%ที่จะทำให้ภาพรวมจะกลายเป็นวงกลม
- .img-Thumbnail:เพิ่ม padding บางคน (ขยาย) และขอบสีเทา
พิจารณาตัวอย่างต่อไปนี้แสดงให้เห็นถึง:
ตัวอย่าง
<img src = "/wp-content/uploads/2014/06/download.png" class = "Img-rounded">
<img src = "/wp-content/uploads/2014/06/download.png" class = "img วงกลม">
<img src = "/wp-content/uploads/2014/06/download.png" class = "img-ภาพขนาดย่อ">
ลอง»
ผลมีดังนี้
<img> ระดับ
เรียนต่อไปนี้สามารถใช้ได้กับภาพใด ๆ
| หมวดหมู่ | ลักษณะ | ตัวอย่าง |
|---|---|---|
| .img โค้งมน | เพิ่มเนื้อภาพ (IE8 ไม่สนับสนุน) | ความพยายาม |
| .img วงกลม | ภาพจะกลายเป็นวงกลม (IE8 ไม่สนับสนุน) | ความพยายาม |
| .img-ภาพขนาดย่อ | รูปขนาดย่อ | ความพยายาม |
| .img ตอบสนอง | รูปภาพที่ตอบสนองต่อ (จะขนาดดีเพื่อองค์ประกอบหลัก) | ความพยายาม |
ภาพที่ตอบสนองต่อ
โดยแท็ก <img> เพื่อเพิ่มระดับการสนับสนุนภาพ .img ตอบสนองที่จะทำให้การออกแบบที่ตอบสนอง รูปภาพจะขนาดดีเพื่อองค์ประกอบหลัก
.img ตอบสนองระดับความกว้างสูงสุด: 100% และสูงอัตโนมัติสไตล์ที่ใช้ในภาพ: