Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Фишки css

Как растянуть картинку на весь экран с помощью 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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример с css</title>
  <style>
   body {
    background: url(http://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

Для начала хочу сказать, что 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 применится к рисунку только после отработки функции на сервере.

На этой ноте я заканчиваю статью. Не забывайте подписываться на мой обучающий блог и делиться ссылкой на публикации с друзьями. Пока-пока!

С уважением, Роман Чуешов


Прочитано: 254 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Виталий

    Чувак (ибо по другому назвать не могу...)

    русский поучи и заголовки поправь! курсов по инфобизнесу насмотрелся что ли?)) :lol:

    28.04.2017 в 23:07
  • Володя

    Неплохой сайтик.

    06.05.2017 в 08:59