Всем привет! Мы разобрались с тем, что такое адаптивная верстка, сетка и как сделать адаптивными шрифты. Теперь же давайте разберем, как адаптировать изображения .
Всем привет! Мы разобрались с тем, что такое адаптивная верстка, сетка и как сделать адаптивными шрифты. Теперь же давайте разберем, как адаптировать изображения.
На самом деле это очень простая тема, и она не займет у нас много времени.
Чтобы ваши изображения стали гибкими, нужно просто добавить им свойство 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.
Итак, сегодня вы узнали, как просто сделать изображения адаптивными, какие проблемы могут встретиться при использовании данного способа и как их решить. Спасибо за внимание и удачи!
