بوت اسٹرپ 5 تصویر

ਇਮੇਜ ਕਾਰਕੁਨ

ਗੋਲ

.rounded ਕਲਾਸ ਇਮੇਜ ਨੂੰ ਗੋਲ ਕਰੇਗੀ

ਇਨਸਟੈਂਸ

<img src="flower.jpg" class="rounded" alt="Flower">

ਆਪਣੇ ਹੀ ਪ੍ਰਯੋਗ ਕਰੋ

ਗੋਲ

.rounded-circle ਕਲਾਸ ਇਮੇਜ ਨੂੰ ਗੋਲ ਕਰੇਗੀ

ਇਨਸਟੈਂਸ

<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">

ਆਪਣੇ ਹੀ ਪ੍ਰਯੋਗ ਕਰੋ

ਸ਼ੋਰਡ

.img-thumbnail ਕਲਾਸ ਇਮੇਜ ਨੂੰ ਬੋਰਡਰ ਨਾਲ ਸ਼ੋਰਡ ਕਰੇਗੀ

ਇਨਸਟੈਂਸ

<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">

ਆਪਣੇ ਹੀ ਪ੍ਰਯੋਗ ਕਰੋ

ਇਮੇਜ ਮਿਸਾਲ

ਇਮੇਜ ਨੂੰ ਮੱਧਮ ਕਰੋ .float-start ਕਲਾਸ ਇਮੇਜ ਨੂੰ ਵੱਲੋਂ ਬਾਹਰ ਕਰੇਗੀ, ਜਾਂ ਵਰਤੋਂ .float-end ਸੱਜੇ ਤਰਫ ਬਾਹਰ ਕਰੋ

ਇਨਸਟੈਂਸ

<img src="tulip.jpg" class="float-start">
<img src="tulip.jpg" class="float-end">

ਆਪਣੇ ਹੀ ਪ੍ਰਯੋਗ ਕਰੋ

ਮੱਧਮ ਇਮੇਜ

ਇਮੇਜ ਨੂੰ ਮੱਧਮ ਕਰਨ ਲਈ, ਅਸੀਂ utility ਕਲਾਸ ਜੋੜੀ ਹੈ .mx-auto (margin:auto) ਅਤੇ .d-block (display:block)：

ਇਨਸਟੈਂਸ

<img src="tulip.jpg" class="mx-auto d-block">

ਆਪਣੇ ਹੀ ਪ੍ਰਯੋਗ ਕਰੋ

ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਇਮੇਜ

ਇਮੇਜ ਦੀਆਂ ਕਈ ਮਾਤਰਾਵਾਂ ਹਨ।ਸਕਰੀਨ ਵੀ ਅਜਿਹਾ ਹੈ।ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਇਮੇਜ ਸਕਰੀਨ ਦੇ ਮਾਤਰੇ ਨੂੰ ਆਪਣੇ ਹੀ ਸਾਜ਼ੂ ਹੋ ਜਾਵੇਗੀ。 .img-fluid ਕਲਾਸ ਜੋੜੋ <img> ਟੈਗ ਨਾਲ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਇਮੇਜ ਬਣਾਓ, ਫਿਰ ਇਮੇਜ ਬਿੱਲਕੁਲ ਪੈਰੈਂਟ ਐਲੀਮੈਂਟ ਅੰਦਰ ਸਾਜ਼ੂ ਹੋ ਜਾਵੇਗੀ。

.img-fluid ਕਲਾਸ ਲਈ ਇਮੇਜ ਐਪਲਾਈ ਕਰੋ max-width: 100%; ਅਤੇ height: auto; ਹੈ

ਇਨਸਟੈਂਸ

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

ਆਪਣੇ ਹੀ ਪ੍ਰਯੋਗ ਕਰੋ