Картинка на весь экран html: Как сделать изображение на всю ширину окна браузера?

02.08.2022 Facebook Twitter LinkedIn Google+ Разное

Изображение на всю ширину макета

Известно, что ширина окна браузера варьируется в довольно широких пределах, поэтому подгадать под нее не представляется возможным. Установить рисунок на всю ширину можно лишь в том случае, когда применяется фиксированный макет. Ширина при этом четко задана, и сделать рисунок требуемого размера достаточно просто. Следует уточнить, что речь здесь идет не о ширине веб-страницы как таковой, а лишь о ширине макета, в который вписывается вся информация. Например, на сайте boeing.com применяется именно такой подход (рис. 1) и суммарная ширина изображений не превышает заданную величину.

Рис. 1. Главная страница сайта boeing.com

При «резиновом» макете, когда требуется установить изображение на всю ширину окна браузера, независимо от его размера, применяют методы, которые подробно описаны далее.

Растягивание рисунка до 100%

Первый метод состоит в том, что для тега <img> значение атрибута width устанавливается равным 100% (пример 1).

Изображение в таком случае растягивается на всю ширину контейнера, а его высота остается неизменной. Понятно, что в рисунке при этом неизбежно появятся искажения, поэтому подобный метод применяется достаточно редко и далеко не для всех картинок.

Пример 1. Ширина изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Картинка 100% ширины</title>
 </head>
 <body> 
  <p><img src="images/sample.gif" 
  alt="Иллюстрация"></p>
 </body>
</html>

В данном примере ширина (width) рисунка задана как 100%, а высота (height) — 100 пикселов.

Использование бесшовного фонового изображения

Вначале следует подготовить фоновый рисунок, он обязательно должен быть таким, что если рядом положить две одинаковые картинки, то они сливаются в одну, и между ними не возникает заметных артефактов.

Пример такого изображения показан на рис. 2.

Рис. 2. Изображения для создания фона

Ширину рисунка достаточно сделать 20–30 пикселов.

Остерегайтесь делать слишком малую ширину подобной картинки, вроде 1–2 пикселов, поскольку это принесет только вред. Объем файла уменьшится незначительно, а браузеру потребуется достаточно времени, чтобы полностью «замостить» нужную площадь.

Сам фон представляет интерес лишь как часть общего результата. Это значит, что на фоновую область следует наложить еще один рисунок так, чтобы вместе они образовали единое целое. На рис. 3 показано изображение, правый край которого совпадает с фоновым рисунком. Поэтому при наложении этого рисунка на фон они точно совпадут.

Рис. 3. Картинка для наложения на фон

Данное изображение должно выравниваться по левому краю окна браузера, поскольку правый край рисунка совмещается с фоном. Именно в этом случае и картинка и фон образуют цельное изображение.

В примере 2 приведено создание подобного блока за счет использования стилевого свойства background.

Пример 2. Фоновая картинка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновое изображение</title>
  <style type="text/css">
   BODY {
    margin: 0; /* Убираем отступы в браузере */
   }
   #toplayer {
    background: url(images/bg.gif) repeat-x; /* Параметры фона */
    height: 69px; /* Высота слоя */
    border-bottom: 2px solid maroon; /* Параметры линии внизу */
   }
  </style>
 </head>
 <body> 
  <div>
   <img src="images/logo.gif" alt="Логотип сайта">
  </div>
 </body>
</html>

В данном примере высота блока задается с помощью свойства height, она совпадает с высотой рисунка, а его ширина по умолчанию равна auto, иными словами, занимает всю доступную ширину. Повторение фона происходит только по горизонтали, это обеспечивает значение repeat-x свойства background.

Использовать фоновый рисунок не всегда обязательно, иной раз вполне подойдет и одноцветная заливка прямоугольной области. Чтобы гармонично расположить изображение на таком фоне применяют тонирование рисунка (сепия, как это еще называется) или градиентный переход, как показано на рис. 4.

Рис. 4. Изображение с градиентом для размещения на цветном фоне

Графические файлы в формате JPEG не всегда подходят для наложения на цветной фон из-за того, что этот формат вносит искажения в рисунок. За счет этого, гладкого перехода от изображения к фону может не получиться, поскольку будет виден заметный стык. В этом случае лучше применять формат GIF или PNG.

При использовании одноцветного фона код незначительно поменяется (пример 3). Повторять фон теперь не нужно, поэтому свойство background будет иметь только одно значение — желаемый цвет фона.

Пример 3. Цвет фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновый цвет</title>
  <style type="text/css">
   BODY {
    margin: 0; /* Убираем отступы в браузере */
   }
   #toplayer {
    background: #66a240; /* Цвет фона */
    height: 100px; /* Высота слоя */
    font-family: Verdana, sans-serif; /* Гарнитура шрифта */
    font-size: 32px; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    color: white; /* Белый цвет текста */
   }
  </style>
 </head>
 <body> 
  <div>
  <img src="images/logo2.png" alt="Логотип сайта" align="middle">
  Выставка цветов
  </div>
 </body>
</html>

В данном примере устанавливаем параметры блока — его высоту и цвет, а также характеристики текста заголовка. Полученный результат продемонстрирован на рис.  5.

Рис. 5. Совмещение цвета фона и рисунка

Фоновый рисунок большой ширины

Предыдущий способ, хотя и применяется достаточно часто и дает вполне подходящий результат, все же не устанавливает один рисунок на всю ширину макета. Для достижения этой цели применяют следующий алгоритм. Вначале подготавливается изображение достаточно большой ширины (от 1000–1200 пикселов), после чего оно ставится как фоновый рисунок для определенного слоя.

Большая ширина рисунка обеспечивает просмотр фактически при любом разрешении монитора, кроме, разве что, самого фантастического и редко используемого. Если такой рисунок просто добавить через тег <img>, то однозначно получим горизонтальную полосу прокрутки и расползающийся по всем швам макет страницы. Использование изображения как фона и обеспечивает отсутствие ненужной полосы прокрутки. При этом картинка будет занимать всю ширину макета, но ее часть будет скрыта от глаз пользователя, и появляться только при увеличении окна браузера. На рис. 6 показан такой фоновый рисунок. Видно, что часть изображения не помещается в окне, но оставшийся фрагмент занимает всю доступную ширину.

Рис. 6. Фоновый рисунок в окне браузера

Применяется опять же свойство background, в качестве его значения задается путь к фоновой картинке и ее параметры. Так, значение right top говорит, что правый край изображения будет фиксироваться, а при изменении ширины окна браузера станет появляться левая невидимая часть картинки. Если это значение убрать, то по умолчанию будет фиксироваться левый край (пример 4).

Пример 4. Рисунок на всю ширину страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновое изображение</title>
  <style type="text/css">
   BODY {
    margin: 0; /* Убираем отступы в браузере */
   }
   #toplayer {
    background: url(images/popart.
 
 png) no-repeat; /* Параметры фона */
    height: 200px; /* Высота слоя */
   }
  </style>
 </head>
 <body> 
   <div></div>
 </body>
</html>

При использовании фонового рисунка следует учитывать свойственные этому методу ограничения. А именно:

  • рисунок должен быть таким, чтобы при обрезании части изображения он не терял свою информативность;
  • большая ширина предполагает и большой объем графического файла, который следует ограничить за счет уменьшения числа цветов, снижения качества картинки или другими параметрами.

Резюме

Способ добавления изображения на всю ширину макета веб-страницы зависит от применяемого метода верстки. Если используется макет фиксированной ширины, то общая его ширина известна заранее и рисунок по горизонтали следует ограничить этой величиной. Когда мы имеем дело с «резиновым» макетом, то в этом случае активную роль играют фоновые рисунки. Они повторяются по горизонтали таким образом, что получается слитная единая картинка.

Также применяются широкие фоновые изображения, которые не приводят к появлению горизонтальной полосы прокрутки, но при этом занимают всю отведенную им ширину, независимо от размера окна браузера.

html — Как растянуть img на весь экран монитора?

Вопрос задан

Изменён 5 лет 4 месяца назад

Просмотрен 5k раз 

<div>
 <img src="img.jpg">
</div>

чтобы при масштабировании до любых размеров она всегда занимала 100% монитора, а не при достижении ширины монитора свыше 1920px снизу начинало бы появляться пустое место. Уточняю — картинка находится на html-странице и не нужно ее запускать через css — backgroun-image

  • html
  • css

1

как обычно : пользуемся не инлайновыми стилями а в отдельном файле

html,body{
height:100%;
}

img{
display:block;
width:100%;
height:100%;
}
<img src="">

но так же надо помнить что изображение должно быть в альбомном виде

8

Хорошо, если изображение абстрактное и деформация при непропорциональном масштабировании не заметна. .. Можно, с помощью jQuery скрыть изображение, забрать его src и подложить его в ненавистный вам background-image, и добавить background-size: cover…

Можно попробовать использовать object-fit (https://caniuse.com/#feat=object-fit)

body, html {
  margin: 0;
  width: 100vw;
  height: 100vh;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
<img src="http://lorempixel.com/1500/1000/sports/Dummy-Text/" />

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как сделать фоновое изображение HTML полноэкранным?

Обзор

Часто визуально приятнее и интереснее добавлять изображения на фон определенных частей веб-сайта, чем менять только цвет фона. В зависимости от доступного места изображение можно оставить в естественном размере, растянуть или сжать. В этой статье описывается, как установить изображение в качестве фона для элемента с помощью свойства background-size в CSS.

Предпосылки

  1. HTML для структуры нашего изображения.
  2. CSS для стилизации и адаптивности нашего фонового изображения.

Что мы создаем?

Здесь мы узнаем, как растянуть фоновое изображение так, чтобы оно покрывало всю область просмотра браузера. Для этого будет использоваться свойство CSS background-size, и JavaScript не требуется. Веб-дизайнеры часто растягивают фоновые изображения, чтобы покрыть всю область просмотра браузера, поскольку это выглядит заманчиво для пользователей, посещающих наши веб-сайты. Эту задачу довольно легко выполнить, используя несколько строк CSS в наших проектах. Окончательный результат того, что мы создадим, показан ниже:

Как сделать полноэкранное адаптивное фоновое изображение с помощью CSS

Чтобы сделать наши изображения адаптивными, мы планируем сделать следующее:

1.

Заполнить всю область просмотра свойством background-size

Можно установите для свойства CSS background-size значение cover. Используя это значение, браузер автоматически и пропорционально масштабирует ширину и высоту фонового изображения так, чтобы они были либо на равны , либо на больше, чем ширина и высота окна просмотра.

2. Используйте мультимедийные запросы для создания фонового изображения меньшего размера для мобильных устройств

Уменьшенная версия файла фонового изображения будет использоваться для ускорения загрузки страницы на небольших экранах с мультимедийным запросом. Выбор этого параметра необязателен.

В чем преимущества использования фонового изображения меньшего размера на мобильном устройстве? В демо я использовал изображение размером около 5976*35705976*35705976*3570 пикселей.

Благодаря этому размеру мы будем работать на подавляющем большинстве широкоэкранных компьютерных мониторов, доступных в настоящее время. Однако для этого нам потребуется обслуживать файл размером 1,5 МБ, 1,5 МБ и 1,5 МБ.

Для фоновой фотографии никогда не будет хорошей идеей занимать такой большой объем данных, но это особенно плохо для мобильного Интернета. Кроме того, размер изображения слишком велик на устройствах с маленьким экраном.

Мы можем сделать изображения адаптивными, используя следующий подход:

Вот вся необходимая разметка: 

 
 

   <тело>
      ...Ваш контент идет сюда...

Мы назначим изображение, которое будет использоваться в качестве фона для элемента body, чтобы изображение всегда покрывало всю область просмотра наших браузеров.

Теперь наше фоновое изображение покрывает всю область просмотра браузера, и мы собираемся назначить изображение элементу body. Тем не менее, этот метод работает с любым элементом на уровне блока (например, с div или формой).

Фоновое изображение всегда будет масштабироваться так, чтобы покрывать весь контейнер блочного уровня, если ширина и высота контейнера плавные.

 
 background-size: обложка;

Вот где происходит волшебство. Всякий раз, когда устанавливается эта пара свойство/значение, браузер масштабирует фоновое изображение, чтобы оно соответствовало ширине и высоте элемента. Здесь мы используем элемент body в качестве примера.

Когда браузер видит фоновое изображение, которое меньше, чем размеры элемента body, он программно увеличивает изображение. Это происходит на экранах высокого разрешения с небольшими фоновыми изображениями.

Хорошо известно, что когда изображения масштабируются выше их естественных размеров, качество изображения ухудшается (происходит пикселизация).

Качество изображения ухудшается, когда изображения масштабируются за пределы их естественных размеров.

Учтите, что при выборе изображения для вашего проекта, поскольку в демонстрации используются фотографии размером 5976∗35705976*35705976∗3570px для больших экранов, пройдет некоторое время, прежде чем возникнут проблемы.

В зависимости от размера фонового изображения браузер может отображать его в виде плиток.

Использование неповторения предотвратит это: 

 
 background-repeat: no-repeat;

Мы будем держать наше изображение в центре, чтобы все выглядело красиво: 

 
 background-position: center center;

Таким образом, изображение всегда будет центрировано по вертикали и горизонтали.

Следующая проблема возникает, когда высота содержимого больше, чем высота видимого окна просмотра. В этом случае будет полоса прокрутки. Фоновое изображение должно оставаться на месте во время прокрутки вниз. В противном случае изображение либо заканчивается в нижней части фона, либо перемещается, когда пользователь прокручивает страницу вниз (что может сильно отвлекать).

Этого можно добиться, установив для свойства background-attachment фиксированное значение.

 
 фоновое вложение: фиксированное;

Используя краткую нотацию, можно включить все свойства фона, описанные выше:

Например:

 
 background: url(background-photo. jpg) центральная обложка без повторов исправлено;

Теперь мы получили полностью адаптивное изображение, которое всегда будет покрывать весь фон и выглядеть привлекательно для пользователей, посещающих наш веб-сайт. Код для его достижения показан ниже:

Вывод:

Вывод с использованием медиа-запроса показан ниже:

Если ваше мобильное соединение медленное, вы можете уменьшить исходное изображение с помощью Photoshop или другого программного обеспечения для редактирования изображений.

Одним из основных недостатков использования медиа-запроса является то, что при изменении размера окна браузера, например, с 1200px1200px1200px до 640px640px640px (или наоборот), фоновое изображение на мгновение мерцает во время загрузки.

Фоновое изображение HTML на весь экран без CSS

Для установки фонового изображения HTML на весь экран можно использовать различные методы. В этом примере изображение будет занимать весь экран. Это можно сделать с помощью CSS или без него. Как вы можете видеть в приведенном ниже примере, когда мы увеличиваем и уменьшаем масштаб, фоновое изображение не меняется, и все это делается с использованием атрибутов HTML без добавления какого-либо CSS.

  1. Первое свойство, используемое здесь, — это фоновое изображение, которое устанавливает изображение в качестве фона с помощью URL-адреса.
  2. Background-repeat — это следующий атрибут, используемый для предотвращения повторения нашего изображения.
  3. Размер фона — один из наиболее важных атрибутов, используемых здесь, поскольку он фиксирует изображение на заднем плане, чтобы оно не менялось при увеличении и уменьшении масштаба веб-страницы. Покрытие дается как значение.
 
 

<голова>
    Название документа<title>
</голова>
<body background-image="nature/picture.jpg" background-repeat="no-repeat" background-size="cover">
</тело>
</html>
 </pre></pre><p> <strong> Вывод: </strong></p><h3 level="2"><span class="ez-toc-section" id="i-11"> Заключение </span></h3><ol><li> Свойство <strong> CSS background-size </strong> было использовано для того, чтобы сделать фоновое изображение HTML полноэкранным.<img class="lazy lazy-hidden" loading='lazy' src="//winx-fan.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cdn.oboi7.com/static/images/m/90/65/9065c73aac22728263acb4cea4e98ef21fd17fe8.jpg' /><noscript><img loading='lazy' src='/800/600/http/cdn.oboi7.com/static/images/m/90/65/9065c73aac22728263acb4cea4e98ef21fd17fe8.jpg' /></noscript></li><li> Фоновое изображение элемента управляется CSS-свойством background-size. В зависимости от доступного места изображение можно оставить в естественном размере, растянуть или сжать.</li><li> Также можно добавить изображение без использования CSS, используя атрибуты background-image, background-repeat и background-size.</li></ol><h2><span class="ez-toc-section" id="html_img-2"> html — Изображение в полноэкранном режиме с тегом img </span></h2><p> спросил <time itemprop="dateCreated" datetime="2014-07-09T09:39:46"> 8 лет, 8 месяцев назад </time></p><p> Изменено
 1 год, 2 месяца назад</p><p> Просмотрено
 125 тысяч раз</p><p> Я использую тег <code> img </code> для изображений слайдера. Мне нужно, чтобы изображение <strong> было полной ширины и высоты и центрировано </strong> внутри своего контейнера.</p><p> Моя проблема в том, что когда я изменяю ширину окна, мое изображение становится маленьким, а его высота не соответствует высоте окна.<img class="lazy lazy-hidden" loading='lazy' src="//winx-fan.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/02/d8/2c/02d82cce93a13dfb3a83cc39b9ea9ebb.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/02/d8/2c/02d82cce93a13dfb3a83cc39b9ea9ebb.jpg' /></noscript> Мне нужно, чтобы <strong> вел себя так же, как <code> background-size: cover </code>, но с тегом изображения </strong> .</p><pre> background: url(../images/slider/002.jpg) center center;
размер фона: обложка;
 </pre><p> Если я сделаю изображение фоном, то все работает нормально, а вот ползунка не будет. Мне нужно использовать тег <code> <img> </code>.
Вот мой пример.</p><ul><li> html</li><li> css</li><li> изображение</li><li> адаптивный дизайн</li><li> фоновое изображение</li></ul><p data-readability-styled="true"> 3</p><p> Существует несколько способов сделать так, чтобы изображение <strong> покрывало div </strong> с тегом изображения, самый простой — использовать свойство object-fit, например:</p><pre> html,body{
    маржа: 0;
    высота:100%;
}
картинка {
  дисплей:блок;
  ширина:100%;
  высота:100%;
  объект подходит: обложка;
} </pre><pre> <img class="lazy lazy-hidden" decoding="async" src="//winx-fan.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="http://i.imgur.com/5NK0h2e.jpg" alt=""><noscript><img decoding="async" src="http://i.imgur.com/5NK0h2e.jpg" alt=""></noscript> </pre><p> Поддержка браузера хороша для подгонки объектов (см.<img class="lazy lazy-hidden" loading='lazy' src="//winx-fan.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/ee/a3/b8/eea3b84c3024508bc6343a48d54869a1.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/ee/a3/b8/eea3b84c3024508bc6343a48d54869a1.jpg' /></noscript></div></div><div class="panel panel-default"><div class="panel-heading">Comments</div><div class="panel-body"><div class='text-center'><a class='btn btn-lg btn-success' href="javascript:void(0);" onclick="jQuery('#wlt_comments_form').show(); jQuery('#wlt_comments_form_lc').hide();" id="wlt_comments_form_lc">Leave Comment</a></div><div style="display:none;" id="wlt_comments_form"> <a class='badge pull-right' href="javascript:void(0);" onclick="jQuery('#wlt_comments_form').hide(); jQuery('#wlt_comments_form_lc').show();">Close</a><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Leave a Comment<hr /> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/kartinka-na-ves-ekran-html-kak-sdelat-izobrazhenie-na-vsyu-shirinu-okna-brauzera.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://winx-fan.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p><textarea id="comment" name="comment" aria-required="true" placeholder="Комментарий" class="form-control"></textarea></p><p> <input id="author" name="author" type="text" value="" size="30" placeholder="Name" class="form-control" /></p><p> <input id="email" name="email" type="text" value="" size="30" placeholder="Email" class="form-control" /></p><p><input id="url" name="url" type="text" value="" size="30" placeholder="Website" class="form-control" /></p><p class="form-submit wp-block-button"> <input type='hidden' name='comment_post_ID' value='28424' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /><hr /><div class="form-group clearfix"> <label class="control-label col-md-5">What is the sum of:</label><div class="input-group controls col-md-3"> <span class="input-group-addon"> 2 + 3 = </span> <input type="text" name="reg_val" tabindex="500" class="form-control"> <input type="hidden" name="reg1" value="2" /> <input type="hidden" name="reg2" value="3" /></div></div><hr /><div class="clearfix"></div><div class="btnbox"><button name="submit" class="btn btn-success btn-lg" type="submit" id="submit"(.+)>Submit Comment</button></div> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div><div class="clearfix"></div></div></div></div></article><aside class="core_sidebar col-md-300 col-sm-300 hidden-xs" id="core_right_column"><div class="panel panel-default" id="categories-2"><div class="panel-heading">Рубрики </div><div class="panel-body widget"><ul><li class="cat-item cat-item-3"><a href="https://winx-fan.ru/category/akvarelyu">Акварелью</a></li><li class="cat-item cat-item-1"><a href="https://winx-fan.ru/category/bez-rubriki">Без рубрики</a></li><li class="cat-item cat-item-8"><a href="https://winx-fan.ru/category/guashyu">Гуашью</a></li><li class="cat-item cat-item-6"><a href="https://winx-fan.ru/category/dlya-nachinayushhix">Для начинающих</a></li><li class="cat-item cat-item-4"><a href="https://winx-fan.ru/category/karandashom">Карандашом</a></li><li class="cat-item cat-item-7"><a href="https://winx-fan.ru/category/portret">Портрет</a></li><li class="cat-item cat-item-5"><a href="https://winx-fan.ru/category/poetapno">Поэтапно</a></li><li class="cat-item cat-item-10"><a href="https://winx-fan.ru/category/raznoe-2">Разное</a></li><li class="cat-item cat-item-2"><a href="https://winx-fan.ru/category/raznoe">Советы художника</a></li></ul><div class="clearfix"></div></div></div></aside></div></div></div></div></div><p id="back-top"> <a href="#top"><span></span></a></p><footer id="footer"><div id="footer_content"><div class="container-fluid"><div class="row clearfix"><div class="col-md-3"></div><div class="col-md-3 hidden-xs"></div><div class="col-md-3 hidden-xs"></div><div class="col-md-3 hidden-xs"></div></div></div></div><div id="footer_bottom"><div class="container-fluid"><div class="row clearfix"><div class="pull-left copybit">2019 © Все права защищены. <a href="/sitemap.xml">Карта сайта</a></div></div></div></div></footer><div id="freeow" class="freeow freeow-top-right"></div></div><div id="core_footer_ajax"></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://winx-fan.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <script defer src="https://winx-fan.ru/wp-content/cache/autoptimize/js/autoptimize_ec78bde58f9a190dbaf0290bb9323e14.js"></script></body></html>