છબીઓ
પ્રતિભાવાત્મક વર્તણૂકમાં છબીઓને પસંદ કરવા માટે દસ્તાવેજીકરણ અને ઉદાહરણો (જેથી તેઓ તેમના મૂળ તત્વો કરતાં કદી મોટા ન બને) અને તેમાં હળવા વજનની શૈલીઓ ઉમેરો - આ બધું વર્ગો દ્વારા.
બુટસ્ટ્રેપમાંની છબીઓ સાથે પ્રતિભાવશીલ બનાવવામાં આવે છે .img-fluid
. max-width: 100%;
અને height: auto;
તેને ઇમેજ પર લાગુ કરવામાં આવે છે જેથી તે પેરેંટ એલિમેન્ટ સાથે સ્કેલ કરે.
<img src="..." class="img-fluid" alt="Responsive image">
SVG છબીઓ અને IE 10
ઈન્ટરનેટ એક્સપ્લોરર 10 માં, સાથેની SVG ઈમેજો .img-fluid
અપ્રમાણસર કદની છે. આને ઠીક કરવા માટે, width: 100% \9;
જ્યાં જરૂરી હોય ત્યાં ઉમેરો. આ ફિક્સ અન્ય ઇમેજ ફોર્મેટ્સને અયોગ્ય રીતે માપે છે, તેથી બુટસ્ટ્રેપ તેને આપમેળે લાગુ કરતું નથી.
અમારી સરહદ-ત્રિજ્યા ઉપયોગિતાઓ ઉપરાંત , તમે .img-thumbnail
છબીને ગોળાકાર 1px સરહદ દેખાવ આપવા માટે ઉપયોગ કરી શકો છો.
<img src="..." alt="..." class="img-thumbnail">
હેલ્પર ફ્લોટ વર્ગો અથવા ટેક્સ્ટ સંરેખણ વર્ગો સાથે છબીઓને સંરેખિત કરો . માર્જિન યુટિલિટી ક્લાસનો ઉપયોગ કરીનેblock
સ્તરની છબીઓને કેન્દ્રિત કરી શકાય છે ..mx-auto
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" 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>