Background растянуть по ширине: Как растянуть фон на всю ширину окна?

Содержание

Управление элементами. flex-basis, flex-shrink и flex-grow ⚡️ HTML и CSS с примерами кода

Кроме свойств, устанавливающих выравнивание элементов относительно границ flex-контейнера, есть еще три свойства, которые позволяют управлять элементами:

flex-basis: определяет начальный размер flex-элемента
flex-shrink: определяет, как flex-элемент будет уменьшаться относительно других flex-элементов во flex-контейнере
flex-grow: определяет, как flex-элемент будет увеличиваться относительно других flex-элементов во flex-контейнере

flex-basis

Flex-контейнер может увеличиваться или уменьшаться вдоль своей центральной оси, например, при изменении размеров браузера, если контейнер имеет нефиксированные размеры. И вместе с контейнером также могут увеличиваться и уменьшаться его flex-элементы. Свойство flex-basis определяет начальный размер flex-элемента до того, как он начнет изменять размер, подстраиваясь под размеры flex-контейнера.

Это свойство может принимать следующие значения:

auto: начальный размер flex-элемента устанавливается автоматически
content: размер flex-элемента определяется по его содержимому, в то же время это значение поддерживается не всеми современными браузерами, поэтому его пока стоит избегать
числовое значение: мы можем установить конкретное числовое значение для размеров элемента

Например:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox в CSS3</title>
    <style>
      .flex-container {
        display: flex;
        border: 1px #ccc solid;
      }
      .flex-item {
        text-align: center;
        font-size: 1em;
        padding: 1.2em;
        color: white;
      }
      .item1 {
        background-color: #675ba7;
        flex-basis: auto;
        width: 150px;
      }
      .item2 {
        background-color: #9bc850;
        flex-basis: auto;
        width: auto;
      }
      .
  item3 {
        background-color: #a62e5c;
        flex-basis: 200px;
        width: 150px;
      }
    </style>
  </head>
  <body>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
    </div>
  </body>
</html>

У первого элемента у свойства flex-basis установлено значение auto. Поэтому первый элемент в качестве реального значения для ширины будет использовать значение свойства width.

У второго элемента у свойства flex-basis установлено значение auto, однако и свойство width имеет значение auto. Поэтому реальная ширина элемента будет устанавливаться по его содержимому.

У третьего элемента свойство

flex-basis имеет конкретное значение, которое и используется. А свойство width в этом случае уже не играет никакой роли.

flex-shrink

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

В качестве значения свойство принимает число. По умолчанию его значение 1.

Рассмотрим действие этого свойства на примере:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox в CSS3</title>
    <style>
      .flex-container {
        display: flex;
        border: 1px #ccc solid;
        width: 400px;
      }
      .flex-item {
        text-align: center;
        font-size: 1em;
        padding: 1.2em;
        color: white;
      }
      .item1 {
        background-color: #675ba7;
        flex-basis: 200px;
        flex-shrink: 1;
      }
      .item2 {
        background-color: #9bc850;
        flex-basis: 200px;
        flex-shrink: 2;
      }
      .item3 {
        background-color: #a62e5c;
        flex-basis: 200px;
        flex-shrink: 3;
      }
    </style>
  </head>
  <body>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
    </div>
  </body>
</html>

В данном случае начальная ширина каждого элемента равна 200px, то есть совокупная ширина составляет 600px. Однако ширина flex-контейнера составляет всего 400px. То есть размер контейнера недостаточен для вмещения в него элементов, поэтому в действие вступает свойство

flex-shrink, которое определено у элементов.

Для усечения элементов браузер вычисляет коэффициент усечения (shrinkage factor). Он вычисляется путем перемножения значения свойства flex-basis на flex-shrink. Таким образом, для трех элементов мы получим следующие вычисления:

// первый элемент
200px * 1 = 200
// второй элемент
200px * 2 = 400
// третий элемент
200px * 3 = 600

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

flex-grow

Свойство flex-grow управляет расширением элементов, если во flex-контейнере есть дополнительное место.

Данное свойство во многом похоже на свойство flex-shrink за тем исключением, что работает в сторону увеличения элементов.

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

Итак, используем свойство flex-grow:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox в CSS3</title>
    <style>
      .flex-container {
        display: flex;
        border: 1px #ccc solid;
      }
      .flex-item {
        text-align: center;
        font-size: 1em;
        padding: 1.3em;
        color: white;
      }
      .item1 {
        background-color: #675ba7;
        flex-grow: 0;
      }
      .item2 {
        background-color: #9bc850;
        flex-grow: 1;
      }
      .   item3 {
        background-color: #a62e5c;
        flex-grow: 2;
      }
    </style>
  </head>
  <body>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
    </div>
  </body>
</html>

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

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

Так как у первого элемента свойство flex-grow равно 0, то первый элемент будет иметь константные постоянные размеры. У второго элемента flex-grow равно 1, а третьего — 2. Таким образом, в сумме они дадут 0 + 1 + 2 = 3. Поэтому второй элемент будет увеличиваться на 1/3 дополнительного пространства, на которое растягивается контейнер, а третий элемент будет получать 2/3 дополнительного пространства.

Свойство flex

Свойство flex является объединением свойств flex-basis, flex-shrink и flex-grow и имеет следующий формальный синтаксис:

flex: [flex-grow] [flex-shrink] [flex-basis];

По умолчанию свойство flex имеет значение

0 1 auto.

Кроме конкретных значений для каждого из подсвойств мы можем задать для свойства flex одно из трех общих значений:

flex: none: эквивалентно значению 0 0 auto, при котором flex-элемент не растягивается и не усекается при увеличении и уменьшении контейнера
flex: auto: эквивалентно значению 1 1 auto
flex: initial: эквивалентно значению 0 1 auto

Так, применим свойство flex:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Flexbox в CSS3</title>
    <style>
      . flex-container {
        display: flex;
        border: 1px #ccc solid;
        width: 600px;
      }
      .flex-item {
        text-align: center;
        font-size: 16px;
        padding: 10px 0;
        color: white;
      }
      .item1 {
        background-color: #675ba7;
        width: 150px;
        flex: 0 0 auto;
      }
      .item2 {
        background-color: #9bc850;
        width: 150px;
        flex: 1 0 auto;
      }
      .item3 {
        background-color: #a62e5c;
        width: 150px;
        flex: 0 1 auto;
      }
      .item4 {
        background-color: #2a9fbc;
        width: 150px;
        flex: 1 1 auto;
      }
    </style>
  </head>
  <body>
    <div>
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
      <div>Flex Item 3</div>
      <div>Flex Item 4</div>
    </div>
  </body>
</html>

Здесь каждый элемент имеет начальную ширину в 150 пикселей, так как у всех элементов свойство flex-basis имеет значение 0, что в целом для всех элементов будет составлять 600 пикселей.

При сжатии контейнера будут уменьшаться 3-й и 4-й элементы, так как у них свойство flex-shrink больше нуля. И так как у обоих элементов это свойство равно 1, то оба элемента будут уменьшаться в равных долях.

При растяжении контейнера будут увеличиваться 2-й и 4-й элементы, так как у этих элементов свойство flex-grow больше нуля. И также, так как это свойство равно 1, то эти элементы будут увеличиваться в равных долях.

См. также

flex
flex-basis
flex-shrink
flex-grow

Выравнивание блоков на всю ширину (justify)

03.10.2019

8958

В закладки

Как в горизонтальным меню, метод с justify и after 100% можно использовать для выравнивания других элементов в одну линию на всю ширину родителя.

<div>
	<a href="#">Apple</a>
	<a href="#">Xiaomi</a>
	<a href="#">Гаджеты</a>
	<a href="#">Смартфоны</a>
	<a href="#">Аксессуары</a>
</div>

HTML

. list {	
	text-align: justify;
}
.list:before{
	content: '';
	display: block;
	width: 100%;
	height: 0;
}
.list:after {
	content: '';
	display: inline-block;    
	width: 100%;
	height: 0;
	visibility: hidden;
	overflow: hidden;
}
.list a {
	font-size: 20px;
	color: #0008ff;
}

CSS

<ul>
	<li>Apple</li>
	<li>Xiaomi</li>
	<li>Гаджеты</li>
	<li>Смартфоны</li>
	<li>Аксессуары</li>
</ul>

HTML

.list {	
	text-align: justify;
	margin: 20px 0;
	padding: 0;
}
.list:before{
	content: '';
	display: block;
	width: 100%;
	height: 0;
}
.list:after {
	width: 100%;
	height: 0;
	visibility: hidden;
	overflow: hidden;
	content: '';
	display: inline-block;
}
. list li {	
	display: inline-block;
	padding: 20px 0;
	width: 127px;
	text-align: center;
	color: #fff;
	background: #f99752;
	font-size: 19px;
}

CSS

<div>
	<div>Apple</div>
	<div>Xiaomi</div>
	<div>Гаджеты</div>
	<div>Смартфоны</div>
	<div>Аксессуары</div>
</div>

HTML

body {
	background: #eee;
}

.list {	
	text-align: justify;
	margin: 20px 0;
}
.list:before{
	content: '';
	display: block;
	width: 100%;
	height: 0;
}
.list:after {
	width: 100%;
	height: 0;
	visibility: hidden;
	overflow: hidden;
	content: '';
	display: inline-block;
}
.list-item {	
	display: inline-block;
	padding: 20px 0;
	width: 110px;
	text-align: center;
	color: #fff;
	background: #ff7d7d;
	font-size: 60px;
	border: 5px solid #fff;
}

CSS

03. 10.2019

8958

#CSS #HTML #Списки

В закладки

Другие публикации

Contenteditable – текстовый редактор

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а…

Одна рамка между блоками

Несколько вариантов как схлопнуть (объединить) границы у рядом стоящих блоков.

CSS display table

CSS-свойство display table и другие, делают вывод группы элементов подобно таблице, но с ограничением – объединения ячеек colspan и rowspan не поддерживаются.

SVG Background stretch — Общие — Форум

samulir (Самули Р.) 11 марта 2019 г., 10:00 1

Можно ли сделать фон раздела 100% ширины И высоты без обрезки? У меня есть векторное изображение, которое может растягиваться вместе с разделом.

Спасибо!

1 Нравится

Винсент (Венсан Бидо) 11 марта 2019 г., 12:35 2

Да, не только с SVG, но и со всеми форматами.

http://vincent.polenordstudio.fr/snap/19dahww.jpg

1 Нравится

самулир (Самули Р.) 11 марта 2019 г., 12:57 3

Эй, Винсент! У меня это не работает…

482674×1160 284 КБ

1 Нравится

Винсент (Венсан Бидо) 11 марта 2019 г., 14:04 4

Плохо, вы правы, это не работает с SVG.

1 Нравится

(Джефф Селсер) 12 марта 2019 г., 15:41 5

Эта статья достойна внимания.

1 Нравится

самулир (Самули Р.) 13 марта 2019 г., 00:58 6

Спасибо!! посмотрю

1 Нравится

Винсент (Венсан Бидо) 13 марта 2019 г., 8:54 7

Вот код, необходимый для сброса соотношения сторон.

 .stretched-logo-bg {
    background: url("../img/curve.svg#svgView(preserveAspectRatio(none))") по центру без повторения;
    размер фона: 100% 100%;
}

1 Нравится

самулир (Самули Р. ) 13 марта 2019 г., 11:41 8

Большое спасибо, Винсент!! Я попробую это!

янм (Элиас) 5 апреля 2019 г., 14:36 9

Привет,

это хорошее решение от Винсента. Но у меня был случай, когда это было бы очень раздражающим по некоторым причинам. Я обнаружил, что есть другой подход:

Вы можете открыть свой SVG в текстовом редакторе (Sublime и т. д.) и жестко закодировать его прямо в свой SVG.

1. Первый шаг , найти:
svg

и изменить на
svg

2. Второй шаг , добавьте атрибут saveAspectRatio = «none» сразу после ширины и высоты, как здесь:

3. Третий step:
Сделайте SVG фоновым изображением с «обложкой»

Надеюсь на помощь

4 лайков

Вера (Вера) 22 января 2021 г., 21:40 10

Это золото. Большое спасибо!

Паскаль_Помаска (Паскаль Помаска) 6 марта 2021 г., 22:49 11

Удивительная помощь! Большое спасибо

Мэгги (мэгги) 24 мая 2021 г., 19:26 12

спасибо @vincent и ianm, это очень полезно!! Как раз тот ответ, который я искал сегодня

1 Нравится

СпроситьКауко (Самули Рааппана) 8 декабря 2022 г. , 5:02 13

Отлично!! Спасибо, работает как часы

max333 (Макс Анчидин) 1 февраля 2023 г., 23:28 14

это буквально спасение жизни! большое спасибо!

Как предотвратить растяжение фоновых изображений? — Английский

Скавенлофт 25 августа 2017 г., 22:15

Я пытаюсь использовать файл .jpg в качестве фона страницы пользовательского стиля. И страница, и изображение имеют формат a5. Одни изображения подходят идеально, а другие (созданные на том же софте, с одинаковыми пропорциями) хаотично растягиваются и деформируются. Я пробовал разные варианты, доступные через редактор стилей, но ничего не работает. Любые идеи, что может быть не так или как это исправить?

айлитоз 26 августа 2017 г., 6:13

После того, как вы вставили свое изображение, выберите его (нажмите на него, чтобы убедиться, что вы выбрали изображение, а не кадр, в котором оно находится) и перейдите к Формат → Изображение... , Введите вкладку. В разделе Размер установите флажок Сохранить соотношение и в конечном итоге измените размер на нужный, если он изменился (нажмите Исходный размер , затем масштабируйте, используя либо Ширина , либо Высота ; оба синхронизированы из-за Keep ratio ).

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

Грантлер 26 августа 2017 г., 6:51

создан на том же софте, с идентичными пропорциями

Вы можете попробовать импортировать файл изображения на страницу > свойства/область-фон. См. прикрепленный снимок экрана… Имейте в виду, что пропорции должны ориентироваться на реальную текстовую область, т. е. область ввода плюс верхние и/или нижние колонтитулы.

WriterBackground100Percent.png

Микекагански 26 августа 2017 г., 6:52

Если вы используете вкладку «Область» стиля страницы для назначения растрового изображения в качестве фона, то есть варианты вставки изображения: вы можете использовать «Исходный» стиль (не мозаичный или растянутый) и настроить ширину и высоту (в процентах) . Вы должны иметь в виду, что фон страницы занимает только область внутри полей (т. е. тело страницы и верхний/нижний колонтитул).

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

Скавенлофт 30 августа 2017 г., 13:58

Вы правы, вот ссылка на файл.

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

Штирлиц — Сеть печатных салонов в Перми

Background растянуть по ширине: Как растянуть фон на всю ширину окна?

Управление элементами. flex-basis, flex-shrink и flex-grow ⚡️ HTML и CSS с примерами кода

flex-basis

flex-shrink

flex-grow

Свойство flex

См. также

Выравнивание блоков на всю ширину (justify)

Другие публикации

SVG Background stretch — Общие — Форум

Как предотвратить растяжение фоновых изображений? — Английский

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