Bootstrap 4 изображения

Адаптивни изображения

Когато работим с изображения, една от основните грижи е да ги покажем с желаната ширина, а не с техния оригинален размер. По подразбиране изображенията се визуализират с тяхната собствена ширина и обикновено това нарушава адаптивния дизайн. Една възможност е да се зададе тяхната ширина и височина чрез CSS, но това ще отнеме повече време в дългосрочен план. Друга възможност е да зададем на изображенията ширината на родителския им елемент (без да ги оставяме да излизат извън контейнера). За да постигнем това, трябва да използваме клас .img-fluid. Това прави картината адаптивна и е еквивалент на следния CSS код, зададен в свойствата на изображението: width: 100%; и height: auto;.

class="image-parent">
    class="img-fluid" alt="some description">

Оразмеряване на изображения

Чрез използване на Bootstrap 4 Flex

Можем да решим изображението да заеме определен процент от ширината на родителския си елемент. Един от начините за постигане на това е, да се използват редове и колони. Трябва да укажем на изображението колко колони трябва да заеме, като зададем съответния клас за колони.

class="row">
    
class="col-4">
      class="img-fluid" alt="turtle">
    

    
class="col-4 offset-4">
      class="img-fluid" alt="birds">
    

</div>

Чрез използване на инструменти за оразмеряване (Sizing Utilities)

За да оразмерим изображението независимо от координатната мрежа на Bootstrap, можем да използваме съответните инструменти (класове) за оразмеряване.
.w-[percentage] за ширина, където [percentage] може да приема стойности 25, 50, 75, 100 или auto и ще накара изображението да заеме 25%, 50%, 75%, 100% ширината на своя родителски елемент, или своята оригинална ширина.
.h-[percentage] за височина, при същите условия като .w-[percentage]

<div class="container">
    <img src="..." class="w-25" alt="...">
</div>
изображението е с ширина 25% от родителския елемент

Друга идея за използване на инструментите за оразмеряване е да ги добавим към родителския div и да настроим изображението като .img-fluid клас.

<div class="container">
    <div class="w-25">
      <img src="..." class="img-fluid" alt="...">
    </div>
</div>
изображението отново е с ширина 25% от сивия панел елемент