ਚਿੱਤਰ
ਚਿੱਤਰਾਂ ਨੂੰ ਜਵਾਬਦੇਹ ਵਿਵਹਾਰ ਵਿੱਚ ਚੁਣਨ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ (ਇਸ ਲਈ ਉਹ ਕਦੇ ਵੀ ਆਪਣੇ ਮੂਲ ਤੱਤਾਂ ਨਾਲੋਂ ਵੱਡੇ ਨਾ ਬਣ ਜਾਣ) ਅਤੇ ਉਹਨਾਂ ਵਿੱਚ ਹਲਕੇ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰੋ — ਇਹ ਸਭ ਕਲਾਸਾਂ ਰਾਹੀਂ।
ਜਵਾਬਦੇਹ ਚਿੱਤਰ
ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਚਿੱਤਰਾਂ ਨੂੰ ਨਾਲ ਜਵਾਬਦੇਹ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ .img-fluid। max-width: 100%;ਅਤੇ height: auto;ਚਿੱਤਰ 'ਤੇ ਲਾਗੂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਤਾਂ ਜੋ ਇਹ ਮੂਲ ਤੱਤ ਦੇ ਨਾਲ ਸਕੇਲ ਹੋਵੇ।
<img src="..." class="img-fluid" alt="...">SVG ਚਿੱਤਰ ਅਤੇ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ
ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 10 ਅਤੇ 11 ਵਿੱਚ, ਨਾਲ SVG ਚਿੱਤਰਾਂ .img-fluidਦਾ ਆਕਾਰ ਅਨੁਪਾਤਕ ਹੈ। ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ, ਜੋੜੋ width: 100%;ਜਾਂ .w-100ਜਿੱਥੇ ਲੋੜ ਹੋਵੇ। ਇਹ ਫਿਕਸ ਦੂਜੇ ਚਿੱਤਰ ਫਾਰਮੈਟਾਂ ਨੂੰ ਗਲਤ ਢੰਗ ਨਾਲ ਆਕਾਰ ਦਿੰਦਾ ਹੈ, ਇਸਲਈ ਬੂਟਸਟਰੈਪ ਇਸਨੂੰ ਆਪਣੇ ਆਪ ਲਾਗੂ ਨਹੀਂ ਕਰਦਾ ਹੈ।
ਚਿੱਤਰ ਥੰਬਨੇਲ
ਸਾਡੀ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਉਪਯੋਗਤਾਵਾਂ ਤੋਂ ਇਲਾਵਾ , ਤੁਸੀਂ .img-thumbnailਇੱਕ ਚਿੱਤਰ ਨੂੰ ਇੱਕ ਗੋਲ 1px ਬਾਰਡਰ ਦਿੱਖ ਦੇਣ ਲਈ ਵਰਤ ਸਕਦੇ ਹੋ।
<img src="..." class="img-thumbnail" alt="...">ਚਿੱਤਰਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰਨਾ
ਸਹਾਇਕ ਫਲੋਟ ਕਲਾਸਾਂ ਜਾਂ ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ ਕਲਾਸਾਂ ਨਾਲ ਚਿੱਤਰਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰੋ । 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>