Хотя вы не можете «изменить» размеры изображений в CSS3, вы можете заставить их выглядеть измененными в браузере, используя медиа-запросы и принципы адаптивного дизайна.
Идея состоит в том, чтобы изображение отвечало размерам области просмотра, чтобы оно не перекрывало края. Максимальная ширина должна быть определена, если область просмотра выше, чем она широкая, а максимальная высота должна быть определена, если область просмотра шире, чем она высокая.
Вот пример кода и ссылки на другие статьи по этой теме. Обратите внимание на использование img.ri:emptyempty Это селектор CSS3, поэтому IE8 и ниже не будут анализировать объявление.
@media screen and (orientation: portrait) {
img.ri { max-width: 90%; }
}
@media screen and (orientation: landscape) {
img.ri { max-height: 90%; }
}
Более подробно об адаптивных изображениях, вот статья с дополнительной информацией о создании адаптивных центрированных изображений , руководство по поддержанию пропорций изображения с помощью CSS3 и полное руководство по свойству background-size .