Как растянуть картинку на всю ширину css

Css растянуть изображение на всю ширину. Как растянуть картинку на весь экран с помощью css и других проверенных способов. Где будет работать решение растянуть фон CSS

Растянуть фоновую картинку на всю ширину окна браузера с помощью CSS 3.

Решение

Для масштабирования фона предназначено свойство background-size , в качестве его значения указывается 100%, тогда фон будет занимать всю ширину окна браузера. Для старых версий браузеров следует использовать специфические свойства с префиксами, как показано в примере 1.

Как растянуть картинку на всю ширину css

Регистрация на форуме тут, о проблемах пишите сюда — alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите восстановить пароль

Поиск по форуму
Расширенный поиск
К странице.
Страница 1 из 2 1 2 Следующая >

Изображения

Тип файла: jpg Безымянный.jpg (19.8 Кб, 233 просмотров)

Ну конешно. у тебя 4 картинки в одном td, у каждой з картинок стоит width="100%" итого получается что у тебя заполнено 400% из ста, следует ошибка эмуляции и атрибут width у картинок не имеет никакого эфекта. поставь у картинок значение width="25%". а вообще я бы тебе посоветовал подгонять картинки поширене яцейки в графических редакторах, это более професионально.

и еще был вопрос что такое block это значит что данный елемент виден на странице, а вот если бы было none то елемента на странице ты бы не увидел.

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

Хорошо организованные и простые для понимания, бесплатные учебные пособия, по самостоятельному веб строительству, с большим количеством примеров использования HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java, XML и т.д.

Свойство background-size

С помощью background-size можно масштабировать изображение по заданным размерам. Согласно документации этого свойства (ссылка на htmlbook) оно может принимать значения cover и contain.

  • cover – Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
  • contain – Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

Всё, что нам нужно установить фоновое изображения для HTML:

Готово! Теперь изображение отображается на весь экран, даже при изменении размера окна браузера. Работает так же в IE9+.

Способ 1. Адаптивная фоновая картинка css-средствами

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

Для этого нужно всего лишь написат вот такую строку:

background- size: 100% auto

Первый параметр, т.е. 100%, отвечает за растягивание картинки по горизонтали, второй параметр – по вертикали. Теперь перейдем к примеру.

1234567891011121314151617181920212223242526272829303132333435 <!DOCTYPE html><html> <head> <meta charset=&#8221;utf-8&#8243;> <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 h1 </style> </head> <body><div> <h1>Планетарий на открытой местности!</h1> <p>Познайте далекие звезды, планеты и кратеры луны&#8230;</p></div> </body></html>

Такой способ поддерживают браузеры, начиная с 10 версии Opera, 3 версии Safari, Firefox 3.6 и 9 версии IE.

Имитация растянутого фона в устаревших браузерах

Маловероятно, что понадобится обеспечивать поддержку HTML body background image браузерам старше IE9 . Но предположим, что вас беспокоит, будет ли сайт корректно отображаться в IE8 . В этом случае нужно имитировать растянутый фон. Можно использовать префиксы браузеров для Firefox 3.6 ( -moz-background-size ) и Opera 10.0 ( -o-background-size ).

Самый легкий способ имитировать растянутое фоновое изображение — это растянуть его по всей странице. Тогда не останется лишнего пространства, и не нужно будет волноваться, что текст не поместится в растянутую область. Вот как можно HTML background image растянуть:

Добавьте изображение для фона как первый элемент веб-страницы, и назначьте ему id равное «bg» :

Расположите фоновое изображение так, чтобы оно было зафиксировано сверху и слева, было 100% в ширину и 100% в высоту.
Добавьте приведенный ниже код в таблицу стилей:

Поместите все содержимое страницы внутрь элемента DIV с id «content» . Добавьте DIV под изображением:

Примечание : сейчас пришло время взглянуть на страницу. Изображение должно выглядеть растянутым, но содержимое пропало. Почему? Фоновое изображение 100% в высоту, а раздел содержимого располагается в потоке документа после изображения – большинство браузеров не отобразят его.

Задайте содержимому относительное позиционирование и задайте z-index , равный 1. Это поднимет его над фоновым изображением в браузерах. Добавьте приведенный ниже код в таблицу стилей:

  1. Свойство HTML CSS background image в Internet Explorer 6 несовместимо с современными стандартами. Есть много способов спрятать CSS от любого браузера, кроме IE6 , но самое это использовать условные комментарии.
  2. Обязательно проверьте это в IE 7 и IE 8 . Возможно, понадобится откорректировать комментарии.

Немногим сайтам необходимо поддерживать IE 7 или 8 , а IE6 – еще меньше! Как таковой, этот подход устарел. Я оставляю это как любопытный пример того, насколько было трудно до того, как все браузеры стали работать сообща!

Изображение на всю страницу

Узнать, как создать фоновое изображение, которое покрывает все окно браузера. В следующем примере показано полноэкранное (и полуэкранное) адаптивное фоновое изображение:

Демо &#8211; Фоновое изображение на всю страницу

Демо &#8211; Фоновое изображение на половину страницы

Курсы по CSS (в открытом доступе)

Свойства фона html-элементов

1. Базовый цвет: свойство background-color

Свойство background-color устанавливает цвет фона элемента. Цвет рисуется за фоновыми изображениями. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого.

Цвет фона обрезается в соответствии со значением background-clip самого нижнего слоя фонового изображения.

Свойство не наследуется.

background-color
Значения:
цвет Значение принимает все форматы цвета свойства color. Значение по умолчанию transparent.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

background-color: salmon;background-color: #00ff00;background-color: rgba(255, 128, 128, 0.5);background-color: currentColor;background-color: transparent;background-color: inherit;background-color: initial;background-colorРис. 1. Свойство background-color для разных элементов

2. Источник изображения: свойство background-image

Свойство background-image устанавливает фоновое изображение (одно или несколько) элемента. Значение none считается слоем изображения, но ничего не рисует. Изображение, которое является пустым (нулевой ширины или нулевой высоты), которое не загружается или не может быть отображено (например, потому что оно не в поддерживаемом формате изображения) также считается слоем, но ничего не рисует.

Семантически важные изображения должны предоставляться в разметке документа, например, с тегом <img>.

Свойство не наследуется.

background-image
Значения:
изображение Обозначает 2D-изображение. Это может быть ссылка на URL, нотация image() или запись градиента. Значение по умолчанию none.
inherit Наследует значение свойства от родительского элемента.

background-image: none;background-image: url(http://site.ru/rose.png);background-image: url(tl.png), url(tr.png);background-image: linear-gradient(white, gray);background-image: repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%);background-image: image(&#8220;sprites.svg#xywh=40,0,20,20&#8221;);background-image: inherit;

3. Укладка изображений: свойство background-repeat

Свойство background-repeat определяет, как фоновые изображения укладываются в области фона после того, как для них установлены размеры и позиционирование. Если значение свойства имеет два ключевых слова, первое используется для горизонтального направления, второе — для вертикального.

Свойство не наследуется.

background-repeat
Значения:
repeat-x Изображение повторяется в горизонтальном направлении. Вычисляется в repeat no-repeat.
repeat-y Изображение повторяется в вертикальном направлении. Вычисляется в no-repeat repeat.
repeat Изображение повторяется в обоих направлениях так часто, чтобы покрыть область отрисовки фона. Если изображение не помещается, оно обрезается. Вычисляется в repeat repeat. Значение по умолчанию.
space Изображение повторяется столько раз, сколько оно помещается в области фона, не обрезаясь, изображения расположены на равном расстоянии друг от друга. Первое и последнее изображения касаются краев области. Если область рисования фона больше, чем область позиционирования фона, шаблон повторяется, чтобы заполнить область рисования фона. Если недостаточно места для двух копий изображения, то размещается только одно изображение, а свойство background-position определяет его положение. Вычисляется в space space.
round Изображение повторяется так часто, чтобы заполнить область фона, масштабируясь и не обрезаясь. Вычисляется в round round.
no-repeat Изображение размещается один раз и не повторяется. Вычисляется в no-repeat no-repeat.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

background-repeat: repeat-x;background-repeat: repeat-y;background-repeat: repeat;​​​​​​​background-repeat: space;​​​​​​​background-repeat: round;​​​​​​​background-repeat: no-repeat;background-repeat: repeat space;background-repeat: repeat repeat;background-repeat: round space;background-repeat: no-repeat round;background-repeat: inherit;background-repeat: initial;13Рис. 2. Свойство background-repeat

4. Фиксация изображения: свойство background-attachment

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

Свойство не наследуется.

background-attachment
Значения:
scroll Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию.
fixed Предотвращает перемещение, фиксирует фоновое изображение на заднем плане.
local Фоновое изображение прокручивается вместе с содержимым элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

background-attachment: scroll;background-attachment: fixed;background-attachment: local;background-attachment: inherit;background-attachment: initial;

5. Позиционирование изображений: свойство background-position

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

Свойство не наследуется.

background-position
Значения:
% Горизонтальное смещение вычисляется по формуле ширина области расположения фона — ширина фонового изображения. Вертикальное смещение по формуле высота области расположения фона &#8211; высота фонового изображения, где размер изображения — это размер, заданный свойством background-size. Значение по умолчанию 0% 0%.
длина Значение длины дает фиксированную длину в качестве смещения.
left Вычисляет до 0% для горизонтальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно левого края.
center Вычисляет в left 50% для горизонтального положения, если не указано иное горизонтальное положение, или как top 50% для вертикального положения, если оно задано.
right Вычисляет в 100% для горизонтального положения, если задано одно или два значения, в противном случае смещение происходит относительно правого края.
top Вычисляет в 0% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно верхнего края.
bottom Вычисляет в 100% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно нижнего края.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

background-position: top;background-position: bottom;background-position: left;background-position: right;background-position: center;background-position: 25% 75%;background-position: 0 0;background-position: 1cm 2cm;background-position: 10ch 8em;background-position: 0 0, center;background-position: bottom 10px right 20px;background-position: right 3em bottom 10px;background-position: bottom 10px right;background-position: top right 10px;background-position: inherit;background-position: initial;

Если указано только одно значение, второе значение считается center. Если заданы два значения в единицах длины или %, то первое значения представляет горизонтальную позицию, второе — вертикальную. Значения в единицах длины или % представляют смещение верхнего левого угла фонового изображения от верхнего левого угла области расположения фона.

Пара ключевых слов может быть переупорядочена, в то время как комбинация ключевого слова и длины или процента не может. Например, center left — допустимое значение, а 50% left — нет.

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

Положительные значения смещают внутрь от края области расположения фона. Отрицательные значения смещают наружу от края области расположения фона.

15Рис. 3. Свойство background-position

Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:

div background_repeat_bottomРис. 4. Фоновое изображение по низу блока

Также благодаря свойству позиционирования, для одного блока можно использовать несколько фоновых изображений:

div 16Рис. 5. Задание для блока нескольких фоновых изображений

6. Область рисования: свойство background-clip

Свойство background-clip определяет область рисования фона. Фон всегда рисуется под рамкой элемента, если таковая имеется.

Корневой элемент имеет другую область рисования фона, поэтому свойство background-clip на него не влияет.

Свойство не наследуется.

background-clip
Значения:
border-box Фон закрашивает область в пределах рамки элемента. Значение по умолчанию.
padding-box Фон закрашивает область в пределах внутренних полей элемента.
content-box Фон закрашивает только область содержимого.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

background-clip: border-box;background-clip: padding-box;background-clip: content-box;background-clip: text;background-clip: inherit;background-clip: initial;12Рис. 6. Свойство background-clip

7. Область расположения фона: свойство background-origin

Свойство background-origin указывает область расположения фона для элементов, которые выводятся на экране как единый блок (например, не абзацы текста).

Свойство не наследуется.

background-origin
Значения:
padding-box Фон позиционируется относительно верхних границ области внутренних полей элемента. Значение по умолчанию.
border-box Фон позиционируется относительно верхних границ рамки элемента.
content-box Фон позиционируется относительно верхних границ области содержимого элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

background-origin: border-box;background-origin: padding-box;background-origin: content-box;background-origin: inherit;background-origin: initial;

Если для элемента установлено background-attachment: fixed, свойство не будет иметь эффекта.

Если для элемента заданы background-clip: padding-box, background-origin: border-box, background-position: top left, и элемент имеет ненулевую рамку, тогда верхняя и левая части фонового изображения будет обрезаны.

background-originРис. 7. Свойство background-origin

8. Размер изображений: свойство background-size

Свойство background-size устанавливает размер фоновых изображений.

Свойство не наследуется.

background-size
Значения:
auto Значение по умолчанию. Высота и ширина изображения равны его оригинальным размерам.
длина Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в em.
% Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном.
cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

background-size: cover;background-size: contain;background-size: 50%;background-size: 3.2em;background-size: 12px;background-size: auto;background-size: 50% auto;background-size: 3em 25%;background-size: auto 6px;background-size: auto auto;background-size: auto, auto; background-size: 50%, 25%, 25%;background-size: 6px, auto, contain;background-size: inherit;background-size: initial;14Рис. 8. Свойство background-size

9. Краткая запись свойств фона: свойство background

Свойство background позволяет описать в одном объявлении следующие свойства фона: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip и background-attachment. Необязательно указывать все перечисленные свойства, если какое-либо свойство будет пропущено, оно примет значение по-умолчанию.

Если вы указываете в краткой записи фона свойство background-size, то его значения нужно будет записать через слеш /, чтобы отделить его от свойства background-position.

background: gold;background: url(&#8220;rose.png&#8221;) repeat-y;background: border-box red;background: no-repeat center/80% url(&#8220;../img/icon.png&#8221;);

10. Множественные фоны

Фон блока элемента может иметь несколько слоев в CSS3. Количество слоев определяется количеством значений, разделенных запятыми, указанных в свойстве background-image. Значение none по-прежнему создает слой.

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

backgroundsРис. 9. Пример использования нескольких фоновых изображений

По материалам CSS Backgrounds and Borders Module Level 3

Способ 2. Резиновый фон при помощи css3

Пример резинового фона

С выходом в мир спецификации css3 в язык добавилось много удобных инструментов. Так, для создания растянутого фона в виде изображения используется то же свойство, что и в предыдущей главе, однако размер изображения задается не процентами, а специальным словом cover: background- size: cover. Очень удобно, не правда ли?

Чтобы посмотреть, как работает данное свойство, запустите прошлый пример, изменив в параметры background-size 100% и auto на cover.

Что касается браузеров, то такой способ поддерживают все современные версии.

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

Техника с использованием только CSS. Часть #1.

Используем строчный элемент <img>, размеры которого можно менять в любом браузере. Устанавливаем свойство min-height, чтобы заполнить окно браузера вертикально, а свойству width присваиваем значение 100% для заполнения по горизонтали. Также устанавливаем свойство min-width равным ширине изображения, чтобы никогда оно не уменьшалось.

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

Любой версии нормального браузера: Safari / Chrome / Opera / Firefox.

IE 6: Не работает &#8211; но можно использовать какой-нибудь из трюков для позиционирования.

IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно.

Смотрим демонстрацию использования CSS. Часть 1.

Блок шириной на весь экран монитора выровнять по центру окна браузера

У многих сайтов, в том числе у &#8220;Шпаргалки блоггера&#8221; содержание ограничено определённой шириной и горизонтально выравнивается по середине экрана.

Для того, чтобы контент выходил за пределы этих 1200px, но был ограничен шириной окна браузера, достаточно такого кода:

Способ 3. jQuery и его инструменты создания адаптивного фона

Для начала хочу сказать, что jQuery – это библиотека другого языка – JavaScript – которая упрощает функционирования последнего с html.

Сам по себе jQuery очень удобен. С ним проще работать с API, легче получать доступ к различным элементам кода, а также проще реализовывать некоторые вещи.

Для того чтобы в примере заработал данный способ, нужно вначале подключить скрипт js вот такой строкой:

Ниже я прикрепил программный код примера с уже вставленной в него реализацией jQuery.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 <!DOCTYPE html><html> <head> <meta charset=&#8221;utf-8&#8243;> <title>Пример с jQuery</title><script type=&#8221;text/javascript&#8221; src=&#8221;https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js&#8221;></script> <style> body < background-size: cover; color:#191970; >div h1 #b-g < top: 0; left: 0; z-index:-1; position: fixed; >.b-g-w < width: 100%; >.b-g-h < height: 100%; ></style><script type=&#8221;text/javascript&#8221;>$(window).load(function() < var wind = $(window), $b-g = $(&#8220;#b-g&#8221;), aspectRatio = $b-g.width() / $b-g.height(); function resizeBg() < if ( (wind.width() / wind.height()) < aspectRatio ) < $b-g .removeClass() .addClass(&#8216;b-g-h&#8217;); >else < $b-g .removeClass() .addClass(&#8216;b-g-w&#8217;); >> wind.resize(function() < resizeBg(); >).trigger(&#8220;resize&#8221;);>); </script> </head> <body><div> <img src=&#8221;http://www.cruzo.net/user/images/k/ecc3ecf42c75db1ffce5d06cbe95b1e6_644.jpg&#8221; alt=&#8221;&#8221;> <h1>Планетарий на открытой местности!</h1> <p>Познайте далекие звезды, планеты и кратеры луны&#8230;</p></div> </body></html>

Этот способ является универсальным и поддерживается многими браузерами даже тогда, когда css-инструменты не работают.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *