Іноді потрібно вписати зображення в певний розмір. Ми можемо змінити розмір зображення, вказавши ширину та висоту зображення. Загальним рішенням є використання максимальна ширина: 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"> Перевірте зараз Вихід
У наведеному вище прикладі ми використали кришка значення об'єкт-підгонка власність. Подібно до наведеного вище прикладу, ми можемо використовувати інші значення об'єкт-підгонка властивість, щоб змінити розмір зображення.