Понякога се изисква да се побере изображение в определено измерение. Можем да променим размера на изображението, като посочим ширината и височината на изображението. Често срещано решение е да използвате максимална ширина: 100%; и височина: авто; така че големите изображения да не надвишават ширината на контейнера си. The максимална ширина и максимална височина Свойствата на CSS работят по-добре, но не се поддържат в много браузъри.

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

The обектно прилягане свойство обикновено се прилага към изображение или видео. Това свойство определя как даден елемент реагира на ширината и височината на своя контейнер. Основно има пет стойности на обектно прилягане имущество като напр запълване, съдържане, покритие, никой, намален мащаб, начален , и ти наследяваш . Стойността по подразбиране на това свойство е 'запълвам' .

Пример

В този пример преоразмеряваме изображението, като използваме максимална ширина: 100%; и височина: авто; Имоти.

 cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> 

Изход

Пример

В този пример ние използваме обектно прилягане: покритие; Имот.

 div { width: 300px; height: auto; text-align: center; padding: 15px; border: 3px solid red; } img { object-fit: cover; } <img src="forest.webp" width="300" height="300"> 

Изход

В горния пример използвахме Покрийте стойност на обектно прилягане Имот. Подобно на горния пример, можем да използваме другите стойности на обектно прилягане свойство, за да преоразмерите изображението.

q1 q2 q3 q4