عکس های بوتسترپ
دایره: بندانگشتی: گوشه های گرد شده:
کلاس های تگ <img>
از کلاس های زیر می توان برای استایل بندی کردن هر عکسی استفاده نمود:
| Class | توضیحات | مثال |
|---|---|---|
| img-rounded. | گوشه های گرد شده را با یک عکس اضافه می کند(در IE8 در دسترس نیست). | امتحان کنید |
| img-circle. | عکس را به صورت دایره در می آورد(در IE8 در دسترس نیست). | امتحان کنید |
| img-thumbnail. | عکس را به صورت بند انگشتی در می آورد. | امتحان کنید |
| img-responsive. | یک عکس را به صورت واکنش گرا در می آورد(نسبت به عنصر والد خود به خوبی مقیاس بندی می شود). | امتحان کنید |
عکس های واکنش گرا
می توانید با استفاده از کلاس img-responsive. در تگ <img>، عکس های واکنش گرا را ایجاد کنید. بعد از اضافه کردن کلاس مورد نظر، عکس نسبت به عنصر والد خود، به خوبی مقیاس بندی می شود.
کلاس img-responsive. درواقع دستورات max-width:100% و height:auto را به عکس مورد نظر اعمال می کند:
مثال (عکس های css بوتسترپ)
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">
خودتان امتحان کنید »
