Как сделать изображение на всю ширину окна браузера?
Масштабирование изображений относительно их исходного размера не очень хорошая идея, хотя бы потому, что качество картинки очень сильно ухудшается. Тем не менее, для некоторых видов изображений, к примеру, содержащих геометрические фигуры или абстракцию, масштабирование можно применять вполне эффективно.
Для изменения ширины достаточно задать значение атрибута width тега как 100% . При этом высота изображения будет вычисляться автоматически исходя из сохранения пропорций, поэтому атрибут height указывать не нужно (пример 1).
Пример 1. Ширина изображения
HTML5 IE Cr Op Sa Fx
Ширина 100% Результат данного примера показан на рис. 1.
Рис. 1. Изображение с шириной 100%
Если для тега все-таки установить значение атрибута height в пикселах или процентах, то высота изображения будет задана принудительно, соответственно, исказятся его пропорции.
Как растянуть картинку на весь экран с помощью css и других проверенных способов
Доброго времени суток, гики сайтостроения и любители веб-тематики. Сегодня я хочу дать ответ на часто задаваемый вопрос не только новичками, но иногда и разработчиками: «Как растянуть картинку css на весь экран?» На самом деле такой прием очень просто реализовывается, но тут дело в другом.
На сегодняшний день существует множество способов и языков программирования, благодаря которым изображение может размещаться на целый экран. Поэтому в данной публикации я расскажу о нескольких способах создания полноразмерного фонового изображения при помощи css, css3, jquery и php. Приступим к делу!
Способ 1. Адаптивная фоновая картинка css-средствами
Для того чтобы сделать фоновое изображение адаптивным, в каскадных стилевых таблицах предусмотрено свойство background- size. Оно позволяет установить размер графического файла по отношению к размерности открытой вкладки браузера.
Для этого нужно всего лишь написат вот такую строку:
background- size: 100% auto
Первый параметр, т.е. 100%, отвечает за растягивание картинки по горизонтали, второй параметр – по вертикали. Теперь перейдем к примеру.
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 32 33 34 35
Пример с css body < background: url(https://www.cruzo.net/user/images/k/ecc3ecf42c75db1ffce5d06cbe95b1e6_644.jpg) no-repeat center top fixed; -moz-background-size: 100% auto; -webkit-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; color:#191970; >div < background: #6495ED; width: 86%; margin: 14% 4% 4% 4%; padding: 35px; >h1Планетарий на открытой местности!
Познайте далекие звезды, планеты и кратеры луны.
Планетарий на открытой местности!
Познайте далекие звезды, планеты и кратеры луны.
Такой способ поддерживают браузеры, начиная с 10 версии Opera, 3 версии Safari, Firefox 3.6 и 9 версии IE.
Способ 2. Резиновый фон при помощи css3
С выходом в мир спецификации css3 в язык добавилось много удобных инструментов. Так, для создания растянутого фона в виде изображения используется то же свойство, что и в предыдущей главе, однако размер изображения задается не процентами, а специальным словом cover: background- size: cover. Очень удобно, не правда ли?
Чтобы посмотреть, как работает данное свойство, запустите прошлый пример, изменив в параметры background-size 100% и auto на cover.
Что касается браузеров, то такой способ поддерживают все современные версии.
Для тех, кто хочет разобрать вариант с css подробнее, я рекомендую найти статью на моем блоге о резиновом фоне, где я подробно и с примерами описал данные методы.
Способ 3. jQuery и его инструменты создания адаптивного фона
Для начала хочу сказать, что jQuery – это библиотека другого языка – JavaScript – которая упрощает функционирования последнего с html.
Сам по себе jQuery очень удобен. С ним проще работать с API, легче получать доступ к различным элементам кода, а также проще реализовывать некоторые вещи.
Для того чтобы в примере заработал данный способ, нужно вначале подключить скрипт js вот такой строкой:
Ниже я прикрепил программный код примера с уже вставленной в него реализацией jQuery.
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
Пример с jQuery body < background-size: cover; color:#191970; >div < background: #6495ED; width: 86%; margin: 14% 4% 4% 4%; padding: 35px; >h1 < color: #191970; text-shadow: 3px 2px 1px #fff; >#b-g < top: 0; left: 0; z-index:-1; position: fixed; >.b-g-w < width: 100%; >.b-g-hПланетарий на открытой местности!
Познайте далекие звезды, планеты и кратеры луны.
Планетарий на открытой местности!
Познайте далекие звезды, планеты и кратеры луны.
Этот способ является универсальным и поддерживается многими браузерами даже тогда, когда css-инструменты не работают.
Способ 4. Php-реализация растянутого на весь экран изображения
Несколько слов о самом языке. Php принято называть языком сценариев. С его помощью пишут серверную часть веб-приложений, т.е. связывают сервис с базой данных, обрабатывают запросы и т.д. Сам код php внедряется в html и гибко взаимодействует с ним.
Чтобы вставить кусок кода, нужно прописать текст в вот таких скобках:
А теперь в первоначальный пример вам нужно вставить всего лишь несколько строк:
1 2 3 4 5
Я рассказал все, что хотел донести до вас о четырех способах растяжения изображений на весь экран. Однако хочу заметить, что реализация такого подхода при помощи css намного удобнее, легче, популярнее и к тому же изменения вступают в силу сразу же.
В этот момент, например, решение на языке php применится к рисунку только после отработки функции на сервере.
На этой ноте я заканчиваю статью. Не забывайте подписываться на мой обучающий блог и делиться ссылкой на публикации с друзьями. Пока-пока!
С уважением, Роман Чуешов
Прочитано: 6134 раз
Понравилась статья? Поделись с друзьями:
Этот блог уже читают
читай и ты!
Да, хочу читать и Я
Как растянуть картинку на весь экран?
В общем. у меня игра не тянется в фулл хд (что очень обидно). Сижу выставляю hd качество = изображение сьехало кудато вправо и показывает кусок обрезанный и слева черная полоса. Помогите решить проблему. я уже не хочу смотреть на это в оконном режиме. Видеокарта от Nvidia если что
Голосование за лучший ответ
Кликая правой кнопкой по рабочему столу заходим в панель управления NVIDIA
Заходим в раздел «Регулировка размера и положения рабочего стола» и выставляем «На весь экран»
Макс МухинЗнаток (309) 3 года назад
а что если вместо 1920/1080 там стоит максимум 1600/1200 (в параметрах разрешения.) это как то связанно с драйверами?
Макс Мухин, это значит и есть максимальное разрешение, если нет и у вас 1920/1080 или больше: установите новые драйвера для видео карты или переустановите их. Так-же это может быть что сама видео карта поддерживает только 16:10 ( но только древние )
Как растянуть изображение на весь экран css
При создании сайтов хочется даже фоном подчеркнуть тематическую направленность сайта, вставив в фон красивое изображение. При использовании фото в качестве фона, заставить изображение растягиваться без искажений довольно непросто, особенно если вы все еще заботитесь о пользователях немного устаревших браузеров.
Итак, у нас есть фото размером 900 х 600, которое нужно сделать фоном страницы (Рис.1).
Рис.1. Фото для фонового изображения
Для решения таких задач я смело использую CSS3. Ведь нормальные браузеры типа Google chrome или Mozilla Forefox полноценно поддерживает технологию, а после недавних событий о прекращении поддержки браузеров Internet explorer (см. Microsoft перестает поддерживать Internet Explorer) я вообще перестал считать целесообразным ориентироваться на браузеры без поддержки CSS3.
Суть метода – установить размер изображения фона с помощью свойства background-size значению cover. Рекомендую прописать background и установить свойство background-size для тэга html, ибо он точно всегда соответствует всей области экрана.
html < background: url(images/IMG_1214.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; >