Доброго времени суток, гики сайтостроения и любители веб-тематики. Сегодня я хочу дать ответ на часто задаваемый вопрос не только новичками, но иногда и разработчиками: «Как растянуть картинку 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 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример с css</title>
<style>
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 {
color: #191970;
text-shadow: 3px 2px 1px #fff;
}
</style>
</head>
<body>
<div>
<h1>Планетарий на открытой местности!</h1>
<p>Познайте далекие звезды, планеты и кратеры луны...</p>
</div>
</body>
</html> |
Такой способ поддерживают браузеры, начиная с 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 вот такой строкой:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Ниже я прикрепил программный код примера с уже вставленной в него реализацией 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 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример с jQuery</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
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 { height: 100%; }
</style>
<script type="text/javascript">
$(window).load(function() {
var wind = $(window),
$b-g = $("#b-g"),
aspectRatio = $b-g.width() / $b-g.height();
function resizeBg() {
if ( (wind.width() / wind.height()) < aspectRatio ) {
$b-g
.removeClass()
.addClass('b-g-h');
} else {
$b-g
.removeClass()
.addClass('b-g-w');
}
}
wind.resize(function() {
resizeBg();
}).trigger("resize");
});
</script>
</head>
<body>
<div>
<img src="http://www.cruzo.net/user/images/k/ecc3ecf42c75db1ffce5d06cbe95b1e6_644.jpg" id="b-g" alt="">
<h1>Планетарий на открытой местности!</h1>
<p>Познайте далекие звезды, планеты и кратеры луны...</p>
</div>
</body>
</html> |
Этот способ является универсальным и поддерживается многими браузерами даже тогда, когда css-инструменты не работают.
Способ 4. Php-реализация растянутого на весь экран изображения
Несколько слов о самом языке. Php принято называть языком сценариев. С его помощью пишут серверную часть веб-приложений, т.е. связывают сервис с базой данных, обрабатывают запросы и т.д. Сам код php внедряется в html и гибко взаимодействует с ним.
Чтобы вставить кусок кода, нужно прописать текст в вот таких скобках:
<?php программная реализация ?>
А теперь в первоначальный пример вам нужно вставить всего лишь несколько строк:
1 2 3 4 5 | <?php $(function() {
h = $(window).height();
w = $(window).width();
$(body).style('background','url(путь?src=название_картинки&w='+w+'&h='+h);
});?> |
Я рассказал все, что хотел донести до вас о четырех способах растяжения изображений на весь экран. Однако хочу заметить, что реализация такого подхода при помощи css намного удобнее, легче, популярнее и к тому же изменения вступают в силу сразу же.
В этот момент, например, решение на языке php применится к рисунку только после отработки функции на сервере.
На этой ноте я заканчиваю статью. Не забывайте подписываться на мой обучающий блог и делиться ссылкой на публикации с друзьями. Пока-пока!
С уважением, Роман Чуешов
Чувак (ибо по другому назвать не могу...)
русский поучи и заголовки поправь! курсов по инфобизнесу насмотрелся что ли?))
Не мог, Чувак...
Неплохой сайтик.
Спасибо.
неплохое php решение. только почему-то реализованное на JQuery.