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

8998

В закладки

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

1

<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

2

<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

3

<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

8998

#CSS #HTML #Списки

В закладки

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

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

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

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

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

CSS display table

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

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

Скавенлофт

#1

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

айлитоз

#2

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

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

Грантлер

#3

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

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

WriterBackground100Percent.png

Микекагански

#4

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

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

Скавенлофт

#5

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

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

https://drive.google.com/file/d/0B25jSZQ8STakMmhVbXJhel9QbVE/view?usp=sharing

Майкекагански

#6

У меня работает с 5.4.0.3

AlexKemp закрыто

#7

Как растянуть фоновое изображение моей контактной формы на всю ширину

  • nickius

    Ответ дан 18 августа 2016 г. 06:31

    Кроме того, как мне растянуть фоновое изображение моей контактной формы на всю ширину. Я попытался использовать jotform-form: width 100%, но это не сработало. Я использую кирпичный шаблон для своей формы. Kabbagehome.com Спасибо

  • Борис

    Ответ дан 18 августа 2016 г. 06:41

    Попробуйте добавить в форму следующий пользовательский CSS:

    .supernova {
        background-image: url(«https://s3.amazonaws.com/jufs/EltonCris/form_files/brick-wall.jpg»)!важно ;
        background-size: обложка !важно;
    }

    Вы можете добавить CSS в свою форму, следуя этому руководству:

    https://www.jotform. com/help/117-How-to-Inject-Custom-CSS-Codes

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

    Пожалуйста, сообщите нам, как это работает, или если необходимы какие-либо дополнительные настройки. Ура

  • nickius

    Ответ дан 18 августа 2016 г. 22:36

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

  • берилл JotForm UI Developer

    Ответ дан 19 августа 2016 г. 03:05

    Код CSS, предоставленный моим коллегой, охватывает всю страницу. В дополнение к этому вы также можете попробовать код CSS ниже:

      .supernova {

      background: url(«https://s3.amazonaws.com/jufs/EltonCris/form_files/brick-wall.jpg «) фиксированный центр неповторяющегося центра;

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

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

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

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

    }

     

    Если у вас есть какие-либо вопросы или проблемы, пожалуйста, не стесняйтесь обращаться к нам. Мы будем рады помочь Вам.

  • nickius

    Ответ дан 19 августа 2016 г. 03:13

    Изображение по-прежнему не занимает всю ширину страницы. Это белые пробелы с обеих сторон веб-страницы.

  • берилл JotForm UI Developer

    Ответ дан 19 августа 2016 г. 04:42

    Благодарим вас за предоставленный скриншот вашей проблемы. Не могли бы вы указать URL вашей страницы? Это поможет нам лучше проанализировать проблему. Мы будем ждать вашего ответа.

  • nickius

    Ответ дан 19 августа 2016 г. 13:12

    Kabbagehome.com

  • Элтон Поддержка JotForm

    Ответ 19 августа, 2016 14:47

    Я проверил ваш веб-сайт, и форма правильно встроена в вашу страницу.

    Однако интервал, который вы видите вокруг формы, является частью стиля контейнера на вашей странице, а не формы. Этот контейнер имеет фиксированную ширину 960 пикселей и располагается по центру страницы.

    No related posts.

Автор записи

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

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