Як зробити зображення адаптивними?

Відео: як зробити зображення адаптивним

Всім привіт! Ми розібралися з тим, що таке адаптивна верстка, сітка і як зробити адаптивними шрифти. Тепер же давайте розберемо, як адаптувати зображення.

Насправді це дуже проста тема, і вона не займе у нас багато часу.

Щоб ваші зображення стали гнучкими, потрібно просто додати їм властивість max-width = 100%.

img { 
 max-width:100% - 
}

Усе! Тепер наше зображення не буде виходити за межі батьківського контейнера і буде адаптуватися в залежності від дозволу екрану.

Крім зображень ви можете використовувати цей прийом для відео та інших медіафайлів.

img, embed,object, video { 
 max-width:100% - 
}

Все б добре, але це працює тільки в IE7 + Якщо ж вам потрібно підтримувати IE6, то там це властивість працює в такому записі:

img { 
 width:100% - 
}

Тобто замість max-width пропишіть width.

Відео: Адаптивний дизайн. Урок 7. Адаптивні зображення і оптимізація

Ще одна проблема, яка може вам зустрітися, це погане масштабування зображень в Windows. Так, саме в системі, а не браузері. Якщо придивитися, то можна помітити деякі артефакти.

Вирішити цю проблему для IE просто.

Відео: DRUPAL 8 SITEBUILD: Як зробити зображення адаптивними?

.logo { 
 background: none- 
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.jpg",sizingMethod="Scale") - 
}

Тобто цю проблему нам допомагає виправити властивість filter.

Відео: Урок 51. Як вдіяти не адаптивний сайт, накидаємо базу і трохи поговоримо про фонових зображення

Отже, сьогодні ви дізналися, як просто зробити зображення адаптивними, які проблеми можуть зустрітися при використанні даного способу і як їх вирішити. Дякую за увагу і удачі!

Поділися в соціальних мережах:

Схожі