Сейчас очень модными стали адаптивные версии дизайна, которые умеют подстраиваются под размер экрана устройства, на котором открыли сайт. Столбцы (сайдбары, основной контент и т.п.) можно сделать адаптивной ширины, менять их положение, скрывать при достижении определенных размеров. Как быть с картинками, которые всегда имеют конкретный фактический размер?
Адаптация картинки по ширине.
Если адаптироваться должна только ширина, рецепт очень прост.
|
1 2 3 4 |
img { max-width: 100%; height: auto; } |
Картинка начинает уменьшаться при уменьшении ширины контейнера, в котором она находится. Этому процессу не мешают заданные атрибуты ширины и высоты тега img.
Адаптация картинки по ширине и высоте.
Это более редкий случай. Но он также возможен. Иногда нужно уменьшить область вывода картинки не пропорционально, но сохранив при этом пропорции изображения. Конечно, мы будем жертвовать частью видимой области при таком изменении.
На картинке показано одно и тоже изображение, выведенное в трех разных контейнерах. Масштаб разный, пропорции сохраняем. Этот фокус стал очень простым благодаря CSS версии 3, где появился токен background-size. В данном примере я использую
|
1 |
background-size: cover; |
А вот полный код примера, если вы пожелаете выполнить собственные эксперименты. Картинку можете подставить свою :).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<html> <head> <style> div { background: url(images/real-cosmos.jpg) no-repeat center center; /* вот весь секрет адаптивности */ background-size: cover; display: inline-block; } #sample { width: 350px; height: 450px; } #sample2 { width: 450px; height: 350px; } #sample3 { width: 400px; height: 225px; } </style> </head> <body> <div id="sample"></div> <div id="sample2"></div> <div id="sample3"></div> </body> </html> |