Помогите растянуть картинку на весь экран pda — Вопрос от Михаил Коллинс

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16408)
  • Платные услуги (2107)
  • Вопросы по uKit (81)

Контент-модули

  • Интернет-магазин (1430)
  • Редактор страниц (236)
  • Новости сайта (498)
  • Каталоги (805)
  • Блог (дневник) (111)
  • Объявления (294)
  • Фотоальбомы (433)
  • Видео (255)
  • Тесты (60)
  • Форум (575)

Продвижение сайта

  • Монетизация сайта (219)
  • Раскрутка сайта (2448)

Управление сайтом

  • Работа с аккаунтом (5302)
  • Поиск по сайту (425)
  • Меню сайта (1764)
  • Домен для сайта (1531)
  • Дизайн сайта (13458)
  • Безопасность сайта (1465)
  • Доп. функции (1305)

Доп. модули

  • SEO-модуль (225)
  • Опросы (63)
  • Гостевая книга (99)
  • Пользователи (431)
  • Почтовые формы (318)
  • Статистика сайта (197)
  • Соц. постинг (212)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (644)
  • PHP и API на uCoz (233)
  • SMS сервисы (10)
  • Вопросы по Narod.
    ru (422)
  • Софт для вебмастера (39)

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

Привет. Сегодня рассмотрим, как можно растянуть фон css средствами (без вмешательства других средств, таких как javascript и иже с ними).

Растянуть фон CSS средствами стало возможно с появлением CSS3, конкретно при помощи свойства background-size. Надо сказать, что это свойство работает намного лучше, чем аналогичные решения на Javascript (которые использовались до появления background-size), так как быстрее и адекватнее реагирует на изменение размера браузера, быстрее сглаживает растянутую картинку, и, как любили говорить в начале 2000-х, — «Будет работать даже с отключенным Javascript».

Решение: как растянуть фон CSS средствами

У свойства background-size может быть несколько значений.
1) это может быть одна из дирректив: cover или contain.

Background-size: contain; /* Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. */ background-size: cover; /* Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. */

2) это могут быть проценты (100% или 94% от ширины контейнера). При этом можно использовать как 1 значение в процентах, так и 2. Если значений будет 2, то масштабироваться будут одновременно и высота и ширина картинки, при этом каждая из величин подгоняется пропорционально процентами указанными в параметрах).

Background-size: 100%; /*Равносильное директиве cover*/ background-size: 100% 50%; /*Ширина будет на 100% ширины блока, а вот высота — только на 50%, картинка скорее всего будет деформирована*/

3) прямо численное значение (в пискелях, сантиметрах, em и т. д.). Параметров также может быть 2 (или 1), как и в предыдущем случае.
4) значение auto. Обозначает, что картинка не будет растягиваться, а будет использован исходный размер. При этом, параметров также может быть 2 или 1. То есть можно указать следующее:

Background-size: 60% auto; /*ширина картинки будет 60%, а высота пропорциональна размерам исходной картинки*/

Где будет работать решение растянуть фон CSS?

Судя по данным сайта Can I Use, работать будет во всех современных браузерах, включа IE версии не ниже 9. Так, что переживать в принципе повода нет. Смотрите таблицу совместимости:

Здесь как можно подробнее разберем. как можно реализовать фон (background) интернет ресурса, что должен покрывать все рабочее пространство. Основном все делается на CSS3 , также можно подключить jQuery и даже PHP, но рассмотрим один вариант, который на чистом CSS. Для начало нужно понять или определить, что должно получится. Это безусловно, полноценная заливка окна фоном или изображением, чтоб не было не каких пробелов.

Где будем растягивать картинку, так чтоб она смотрелось корректно, так как если идет фон под одним оттенком цвета, с ним легче работать. Не забываем про соответствие картинка на ее пропорций. И обязательно должно получится, что изображение установилось по центру. Что главное, все должно быть максимально кроссбраузерно и понятное дело, без различных махинаций с flash .

Метод CSS3 background

Это метод самый распространенный, что может растянуть background на чистом CSS , и все благодаря одному свойству, под названием background-size , что только будет присутствовать в CSS3.

Здесь изначально создадим background фиксированным и выставим его по центру, что останется его только растянуть, где подключаем свойства background-size, это все идет под ссылку на фон.

В общим ориентируемся с блоком которому присваиваем стили и дописываем в файле стилей этому блоку, следующий код:

body{
background: url(http://сайт/Aben/ABGDA/artunsa. png) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Как можно заметить, что параметр background , где изначально добавляем путь на картину, где происходит установка положение изображение в соответствие окна экрана. Если разбирать, то значение center и top отвечает за центр и прижатие по всем сторонам, чтоб не было пробелов. Чтоб понятно было, то значение fixed — отвечает за функцию фиксаций.

Метод совсем обычный, что применяю постоянно и он меня устраивает на все 100% процентов.

Еще один способ :

Еще один обычный метод воплотить наверное, вставить картину на страницу. Она станет обладать фиксированную позицию и будет размещена в верхнем левом углу. Мы присвоим ей min-width и min-height 100%. Еще необходимо заблаговременно приготовить картину, в намерении пропорциональности сторон.

#сайт {
position:fixed;
top:0;
left:0;
min-width:100%;
min-height:100%;
}

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


.jpg» alt=»»>

CSS

#сайт {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#сайт img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}

На этом все, здесь представлены не все способы, а те, которые больше пременяют.

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

PS — если у вас есть свои наработки, хотя здесь должно все одинаково быть. то плиз в комментариях поделитесь с ними.

Обнаружил данный урок на одном канале youtube. Очень полезная фишка для веб-дизайнера на мой взгляд.

Иногда ширины оригинального изображения недостаточно для какой-либо дизайнерской задумки, а его растягивание по ширине искажает нужные объекты. Чтобы сохранить эти объекты в целости и при этом растянуть фон изображения, PhotoShop предоставляет нам определенные инструменты. И так, в конечном итоге у нас из оригинального изображения:

Должно получиться вот что:

Приступим. Открываем наше изображение в PhotoShop и выделяем необходимый нам объект:


Далее переходим на вкладку Выделение >> Сохранить выделенную область


И задаем какое-нибудь произвольное имя для данного выделения:


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


И обязательно указываем защищаемый объект:


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

Задача

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

Решение

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

Пример 1. Растягиваемый фон

HTML5 CSS 2.1 IE Cr Op Sa Fx

Растягиваемый фон

Результат данного примера показан на рис. 1.

Рис. 1. Вид фона при уменьшенном размере окна

При увеличении размера окна браузера фон также начнёт расширяться, это приведет к ухудшению вида картинки (рис. 2).

Рис. 2. Вид фона при увеличенном размере окна

Помню перерыл много информации и испробовал не мало способов, пока не нашел именного того решения, что нужно было именно в тот момент.

Ниже я покажу 3 способа, которые растягивают фон на всю ширину экрана.

Способ №1

Первый способ использует чистый CSS3 . Все получается благодаря свойству background-size . В моем случаи я буду растягивать картинку на всю ширину экрана, то есть присвою свойства к тегу body . Вы можете применить по надобности к блоку например.

Растягивать на весь экран будем вот эту картинку с милой девушкой 🙂

В общим определяемся с блоком которому присваиваем стили и дописываем в файле стилей данному блоку, следующий код:

Body{ background: url(images/bg.jpg) no-repeat center top fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Как видите, в параметре background добавляем путь к изображению и устанавливаем положение картинки относительно экрана. В нашем случаи это center и top. Это означает что картинка будет в центре экрана, и прижата своим верхом к верху экрана. Это для того, чтобы всегда было видно лицо девушки. Если у Вас например абстрактный фон или природа, где видно небо, поле, горизонт, то можно поставить значения center и center. В общим если вы знакомы с CSS, то думаю разберетесь. Также установлено значение fixed , которое фиксирует изображение.

Способ очень простой, я его использую всегда и он меня устраивает на все 100%. Есть лишь одно но. Старые браузеры, не знакомы с CSS3, поэтому те кто используют древние версии не увидят должного результата.

Способ №2

Данный способ использует обычный CSS. По сути тоже простой. Выводим в теле сайта изображение присвоив id — bg :

И прописываем стили:

#bg { position:fixed; z-index: -1; top:0; left:0; min-width:100%; min-height:100%; }

Позиционирование фиксированное и проходит растяжение на весь экран.Вот так просто:).

Способ №3

Тут применяется jQuery . Поэтому сначала нужно подключить библиотеку, если она не подключена ранее.

После библиотеки подключаем скрипт, который и будет масштабировать наш фон

И в конце добавляем стилей, чтобы все работало. Открываете файл стилей и добавляете в него следующий код:

#bg { position: fixed; top: 0; left: 0;z-index: -1; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

По стилям видно, что мы добавили позиционирование. В данном случаи это fixed . Изображение при прокрутке будет оставаться фиксированным фоном, если же изменить позиционирование на absolute , то фон можно прокрутить. Кстати, так же можно сделать и с первыми двумя способами.

Также указан параметр — z-index: -1 , для того чтобы картинка была за текстом. Если у Вас нет текста, который должен быть спереди, можете убрать этот параметр.

Какой способ использовать, решать Вам. Как и писал Выше, мне более близок первый способ. Он самый простой и не хуже других.

На этом все, спасибо за внимание. 🙂

html — Растянуть изображение на всю ширину окна браузера

спросил

Изменено 8 месяцев назад

Просмотрено 63к раз

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

Как это сделать в HTML и CSS?

  • HTML
  • CSS

1

Вы можете добавить div с шириной и высотой 100%, также установить ширину и высоту изображения равными 100%

 
​​​​​​​​​​

CSS:

 #wrapper, img{
    ширина:100%;
    высота: 100%;
}
 

jsfiddle

  jpg" alt="alt text" />
 

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

4

Вы добавляете следующий элемент в заголовок HTML-документа:

 
 

Затем вы добавляете

 max-width:100%;
высота:авто;
 

в качестве правила CSS как для изображения, так и для контейнера изображения. (Это также может работать для образа без контейнера.)

И вы добавляете

 тело {
    маржа: 0;
}
 

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

 <дел>
    
​​​​​​​​​​

CSS-файл

 .fixpixel img{
высота: авто;
фоновая позиция: центр;
фоновый повтор: без повтора;
размер фона: обложка;
 }
 

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

Вы можете включить

 body {margin: 0px;}
 

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

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

объект-подгонка — CSS: Каскадные таблицы стилей

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

Вы можете изменить выравнивание объекта содержимого замененного элемента в поле элемента, используя свойство object-position .

 подходит для объекта: содержит;
объект подходит: обложка;
объект-подгонка: заполнить;
соответствие объекту: нет;
объект-подгонка: уменьшение масштаба;
/* Глобальные значения */
объект-подгонка: наследовать;
соответствие объекту: начальный;
объект-подгонка: вернуться;
объект-подгонка: обратный слой;
соответствие объекту: не установлено;
 

Свойство object-fit задается как одно ключевое слово, выбранное из списка значений ниже.

Значения

содержат

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

крышка

Размер замененного содержимого соответствует соотношению сторон при заполнении всего поля содержимого элемента. Если соотношение сторон объекта не соответствует соотношению сторон его блока, то объект будет обрезан по размеру.

заполнение

Размер замененного содержимого соответствует размеру поля содержимого элемента. Весь объект полностью заполнит поле. Если соотношение сторон объекта не соответствует соотношению сторон его блока, то объект будет растянут до нужного размера.

нет

Размер замененного содержимого не изменяется.

в уменьшенном масштабе

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

 объект-подгонка = 
заполнение |
содержат |
крышка |
нет |
уменьшение масштаба

Установка соответствия объекта для изображения

HTML
 <раздел>
   

соответствие объекта: заливка

png" alt="Логотип MDN" /> Логотип MDN

соответствует объекту: содержит

Логотип MDN Логотип MDN

object-fit: обложка

Логотип MDN Логотип MDN

соответствие объекту: нет

Логотип MDN Логотип MDN

объектное соответствие: уменьшение

Логотип MDN Логотип MDN
CSS
 h3 {
 семейство шрифтов: Courier New, моноширинный;
 размер шрифта: 1em;
 поле: 1эм 0 0,3эм;
}
картинка {
 ширина: 150 пикселей;
 высота: 100 пикселей;
 граница: 1px сплошная #000;
 поле: 10px 0;
}
.узкий {
 ширина: 100 пикселей;
 высота: 150 пикселей;
}
.
Автор записи

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

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