Як зробити зображення адаптивними
Всім привіт! Ми розібралися з тим, що таке адаптивна верстка, сітка та як зробити адаптивними шрифти. Тепер же давайте розберемояк адаптувати зображення.
Насправді, це дуже проста тема, і вона не займе у нас багато часу.
Щоб ваші зображення стали гнучкими, потрібно додати їм властивістьmax-width=100%.
Всі! Тепер наше зображення не виходитиме за межі батьківського контейнера і адаптуватиметься залежно від роздільної здатності екрана.
img, embed, об'єкт, відео max-width: 100%; >
Все б добре, але це працює тільки вIE7+Якщо ж вам потрібно підтримуватиIE6, то там ця властивість працює в такому записі:
Тобто. замістьmax-widthпропишітьwidth.
Ще одна проблема, яка може зустрітися, це погане масштабування зображень уWindows. Так, саме у системі, а не браузері. Якщо придивитися, можна помітити деякі артефакти.
Вирішити цю проблему дляIEпросто.
.logo background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale"); >
Тобто. цю проблему нам допомагає виправити властивістьfilter.
Отже, сьогодні ви дізналися, як просто зробити зображення адаптивними, які проблеми можуть зустрітися при використанні даного способу і як їх вирішити. Дякуємо за увагу та удачі!
Додайте до мене у друзіВКонтакте: http://vk.com/myrusakov. Якщо Ви хочете дати оцінку мені та моїй роботі, то напишіть її в моїй групі: http://vk.com /rusakovmy.
Запропонуйте цю статтю друзям:
Якщо Вам сподобався сайт, розмістіть посилання на нього (у себена сайті, на форумі, в контакті):
Вона виглядає ось так:
Коментарі ( 2 ):
Вирішити цю проблему для IE просто. Ну, а для решти браузерів як?)