Как сделать изображения адаптивными?
Всем привет! Мы разобрались с тем, что такое адаптивная верстка, сетка и как сделать адаптивными шрифты. Теперь же давайте разберем, как адаптировать изображения.
На самом деле это очень простая тема, и она не займет у нас много времени.
Чтобы ваши изображения стали гибкими, нужно просто добавить им свойство max-width=100%.
img {
max-width: 100%;
}
Все! Теперь наше изображение не будет выходить за пределы родительского контейнера и будет адаптироваться в зависимости от разрешения экрана.
Помимо изображений вы можете использовать этот прием для видео и других медиафайлов.
img, embed, object, video {
max-width: 100%;
}
Все бы хорошо, но это работает только в IE7+ Если же вам нужно поддерживать IE6, то там это свойство работает в такой записи:
img {
width: 100%;
}
Т.е. вместо max-width пропишите width.
Еще одна проблема, которая может вам встретиться, это плохое масштабирование изображений в Windows. Да, именно в системе, а не браузере. Если присмотреться, то можно заметить некоторые артефакты.
Решить эту проблему для IE просто.
.logo {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale");
}
Т.е. эту проблему нам помогает исправить свойство filter.
Итак, сегодня вы узнали, как просто сделать изображения адаптивными, какие проблемы могут встретиться при использовании данного способа и как их решить. Спасибо за внимание и удачи!
-
Создано 04.11.2014 07:13:26
-
Михаил Русаков
Комментарии (2):
Решить эту проблему для IE просто. Ну, а для остальных браузеров как?)
Ответить
Адаптируем сайты под мобильные устройства Адаптивный сайт решит Ваши проблемы с сайтом: -Клиенты уходят с Вашего сайта, не сделав Заказ. -У Вас нет покупок с мобильных устройств. -Деньги Ваших клиентов достаются конкурентам с мобильной версией сайта. -Клиенты не читают важную информацию на Вашем сайте. -Клиенту трудно увидеть номер Вашего телефона, чтобы связаться с вами. Получи бесплатно макет главной страницы твоего мобильного сайта, кликай: http://adapteem.ru/land Ваш сайт будет одинаково хорошо смотреться на Iphone, Ipad, Android смартфонах и планшетах! По статистике 57% пользователей интернета смотрят сайты с мобильных и планшетов. Гарантируем рост конверсии с мобильного трафика или вернем деньги! Адаптим: мы увеличим Ваши продажи с мобильного или вернем деньги! Звоните: 8 (499) 346-81-06
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.