Растяжение экрана horizontal span
Введение
Почти все современные видеокарты поддерживают работу с двумя или даже тремя дисплеями. Если карты nVidia и ATi обычно имеют два разъёма VGA, то карты типа Matrox Parhelia способны справиться с тремя мониторами.
Рабочие станции с несколькими дисплеями действительно облегчают работу с повседневными приложениями типа офисных программ, графических пакетов и т.д. Также следует учитывать падение цен на 19″ ЭЛТ- и даже 17″ ЖК-мониторы, в результате чего конфигурации с несколькими мониторами стали вполне доступными и интересными, особенно с учётом того, что большинство графических карт поддерживают подключение более одного монитора. Однако игры что-то не торопятся задействовать все преимущества нескольких мониторов. Вместо этого многие игровые разработчики пытаются на одном экране собрать максимальное количество элементов интерфейса. Иногда даже игровой экран скрывается за несколькими меню.
Хотя у нас нет какой-либо статистики по числу геймеров, которые используют несколько мониторов, мы уверены, что многим играм подобная конфигурация отнюдь не помешала бы. Возьмите в качестве примера Battlefield 1942. В настройке с двумя мониторами основной экран отображает игру, в то время как на второй экран выводится большая версия игровой карты и окна с чатом. В результате игрок избавляется от надоедливого переключения между несколькими окнами.
В гонках второй дисплей может отображать вид сверху, что позволяет игроку узнать своё позиционирование на трассе. Да и важную информацию в стратегиях реального времени или экономических симуляторах больше не нужно прятать за многими меню или комбинациями «горячих» клавиш — её можно удобно вывести на второй экран.
Это монтаж — но ведь было бы неплохо играть в Desert Combat подобным образом? Полномасштабная карта, таблица с результатами и окно чата на втором экране.
К сожалению, реальность далека от идеала. Если многие игры поддерживают расширение видимой области за пределы одного монитора (Surround Gaming), большинство из них требует наличия трёх мониторов для действительного погружения в игру. При использовании двух мониторов их рамки находятся в центре экрана, что, вполне очевидно, мешает наслаждению игры и отвлекает. В результате, конфигурацию с двумя мониторами может использовать лишь ограниченное число игр, самые популярные из которых — Egosoft X2 — The Threat и Microsoft Flight Simulator 9 — A Century of Flight. Но перед тем, как мы перейдём к самим играм, давайте рассмотрим поддержку нескольких мониторов на графических картах.
Режимы с двумя дисплеями
Ниже мы сконцентрируемся на игровых режимах, использующих два монитора, поскольку большее число мониторов обычно выходит за бюджет среднего геймера. Кроме того, карты с поддержкой трёх дисплеев довольно редки — практически три монитора сегодня поддерживают только карты Matrox и специальные модели для рабочих станций.
Существует четыре различных режима работы с двумя дисплеями:
- Dual-View: оба монитора получают различные сигналы. Разрешение и частота обновления могут быть выбраны отдельно для каждого экрана.
- Clone-View: второй дисплей отображает то же содержимое, что и первый.
- Horizontal Span: два монитора рассматриваются как один экран, и рабочий стол разбивается пополам. В данном случае горизонтальное разрешение удваивается. Частота обновления идентична для обоих мониторов. Данный режим поддерживается играми наиболее часто.
- Vertical Span: режим аналогичен Horizontal Span, однако рабочий стол растягивается по вертикали.
| ||||
Источник
Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру.
Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений. Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.
Сравним следующие подходы. Выравнивание с помощью:
- таблицы,
- отступов,
- line-height,
- растягивания,
- отрицательного margin,
- transform,
- псевдоэлемента,
- flexbox.
В качестве иллюстрации рассмотрим следующий пример.
Есть два элемента div, при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner.
<div class=»outer»>
<div class=»inner»></div>
</div>
Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.
Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны. Добавим внутреннему элементу правило display: inline-block, а внешнему − text-align: center и vertical-align: middle.
Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block.
Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.
.outer {
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
background-color: #ffc;
}
.inner {
display: inline-block;
width: 100px;
height: 100px;
background-color: #fcc;
}
После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
https://jsfiddle.net/c1bgfffq/
Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки (inline-block) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.
Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.
Выравнивание с помощью таблицы
Первое приходящее на ум решение − заменить внешний блок таблицей из одной ячейки. В этом случае выравнивание будет применяться к содержимому ячейки, то есть к внутреннему блоку.
<table class=»outer-wrapper»>
<td class=»outer»>
<div class=»inner»></div>
</td>
</table>
https://jsfiddle.net/c1bgfffq/1/
Очевидный минус данного решения – с точки зрения семантики неправильно применять таблицы для выравнивания. Второй минус в том, что для создания таблицы требуется добавить еще один элемент вокруг внешнего блока.
Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.
<div class=»outer-wrapper»>
<div class=»outer»>
<div class=»inner»></div>
</div>
</div>
.outer-wrapper {
display: table;
}
.outer {
display: table-cell;
}
Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.
Выравнивание с помощью отступов
Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (Houter – Hinner) / 2.
.outer {
height: 200px;
}
.inner {
height: 100px;
margin: 50px 0;
}
https://jsfiddle.net/c1bgfffq/6/
Минус решения — оно применимо лишь в ограниченном числе случаев, когда известны высоты обоих блоков.
Выравнивание с помощью line-height
Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden.
.outer {
height: 200px;
line-height: 200px;
}
.inner {
white-space: nowrap;
overflow: hidden;
}
https://jsfiddle.net/c1bgfffq/12/
Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height, а также добавить правила display: inline-block и vertical-align: middle.
.outer {
height: 200px;
line-height: 200px;
}
.inner {
line-height: normal;
display: inline-block;
vertical-align: middle;
}
https://jsfiddle.net/c1bgfffq/15/
Минус данного способа заключается в том, что должна быть известна высота внешнего блока.
Выравнивание с помощью «растягивания»
Данный способ можно применять, когда высота внешнего блока неизвестна, но известна высота внутреннего.
Для этого нужно:
- задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
- добавить внутреннему блоку правила top: 0 и bottom: 0, в результате чего он растянется на всю высоту внешнего блока;
- установить значение auto для вертикальных отступов внутреннего блока.
.outer {
position: relative;
}
.inner {
height: 100px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
https://jsfiddle.net/c1bgfffq/4/
Суть этой техники заключается в том, что задание высоты для растянутого и абсолютно спозиционированного блока заставляет браузер вычислять вертикальные отступы в равном соотношении, если их значение установлено в auto.
https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height
Минус данного способа — должна быть известна высота внутреннего блока.
Выравнивание с помощью отрицательного margin-top
Этот способ получил широкую известность и применяется очень часто. Как и предыдущий, он применяется, когда высота внешнего блока неизвестна, но известна высота внутреннего.
Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top: -Hinner / 2.
.outer {
position: relative;
}
.inner {
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
https://jsfiddle.net/c1bgfffq/13/
Минус данного способа — должна быть известна высота внутреннего блока.
Выравнивание с помощью transform
Данный способ похож на предыдущий, но он может быть применен, когда высота внутреннего блока неизвестна. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50%.
.outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
https://jsfiddle.net/c1bgfffq/9/
Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform.
Минус данного способа в ограниченной поддержке свойства transform старыми версиями браузера IE.
Выравнивание с помощью псевдоэлемента
Это наиболее универсальный способ, который может применяться, когда неизвестны высоты обоих блоков.
Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. В этом случае высота добавленного блока будет равна высоте внешнего блока. Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока.
Чтобы не нарушать семантику, строчный блок рекомендуется добавить с помощью псевдоэлемента before или after.
.outer:before {
display: inline-block;
height: 100%;
vertical-align: middle;
content: «»;
}
.inner {
display: inline-block;
vertical-align: middle;
}
https://jsfiddle.net/c1bgfffq/10/
Минус данного способа — он не может быть применен, если внутренний блок имеет абсолютное позиционирование.
Выравнивание с помощью Flexbox
Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.
Внешнему блоку необходимо задать display: flex, а внутреннему − margin: auto. И это все! Красиво, правда?
.outer {
display: flex;
width: 200px;
height: 200px;
}
.inner {
width: 100px;
margin: auto;
}
https://jsfiddle.net/c1bgfffq/14/
Минус данного способа − Flexbox поддерживается только современными браузерами.
Какой способ выбрать?
Нужно исходить из постановки задачи:
- Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height.
- Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top.
- Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform.
- Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox.
Источник
Выравнивание элементов по горизонтали и вертикали можно сделать различными способами. Выбор способа зависит от типа элемента (блочный или строчный), от типа его позиционирования, размеров и т.д.
1. Горизонтальное выравнивание по центру блока/страницы
1.1. Если для блока задана ширина:
div {
width: 300px;
margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/
}
Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;
1.2. Если блок вложен в другой блок и для него не задана/задана ширина:
<div class=»wrapper»>
<div class=»box»></div>
</div>
.wrapper {text-align: center;}
1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:
<div class=»wrapper»>
<div class=»box»></div>
</div>
.wrapper {position: relative; /*задаем для родительского блока относительное позиционирование, чтобы потом абсолютно позиционировать блок внутри него*/}
.box {
width: 400px;
position: absolute;
left: 50%;
margin-left: -200px; /*смещаем блок влево на расстояние, равное половине его ширины*/
}
1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:
<div class=»wrapper»>
<div class=»box»></div>
<div class=»box»></div>
<div class=»box»></div>
</div>
.wrapper {text-align: center; /*располагаем содержимое блока по центру*/}
.box {
display: inline-block; /*располагаем блоки в ряд по горизонтали*/
margin-right: -0.25em; /*убираем правый отступ между блоками*/
}
2. Вертикальное выравнивание
2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:
.button {
height: 50px;
line-height: 50px;
}
2.2. Для выравнивания блока по вертикали внутри родительского блока:
<div class=»wrapper»>
<div class=»box»></div>
</div>
.wrapper {position: relative;}
.box {
height: 100px;
position: absolute;
top: 50%;
margin: -50px 0 0 0;
}
2.3. Вертикальное выравнивание по типу таблицы:
<div class=»wrapper»>
<div class=»box»></div>
</div>
.wrapper {
display: table;
width: 100%;
}
.box {
display: table-cell;
height: 100px;
text-align: center;
vertical-align: middle;
}
2.4. Если для блока задана ширина и высота, и его нужно выровнять по центру родительского блока:
<div class=»wrapper»>
<div class=»box»></div>
</div>
.wrapper {
position: relative;
}
.box {
height: 100px;
width: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
overflow: auto; /*чтобы контент не расползался*/
}
2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:
если для элемента заданы размеры
<div></div>
div {
width: 300px; /*задаем ширину блока*/
height:100px; /*задаем высоту блока*/
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
если для элемента не заданы размеры и он не пустой
<div>
<h1>Some text here</h1>
</div>
h1 {
margin: 0;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
2.5. Абсолютное позиционирование блока
по центру страницы
<body>
<div class=»box»></div>
</body>
div {
width: 500px;
height: 100px; /* если высота не будет задана явна, она будет равна 100% */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
по центру блока
<div class=»wrapper»>
<div class=»box»></div>
</div>
.wrapper {
position: absolute;
}
.box {
width: 100px;
height: 100px; /* если высота не будет задана явна, она будет равна 100% */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Источник
Вопрос задан
3 года 9 месяцев назад
Просмотрен
11k раз
В документации сказано, что background-size:coverрастягивает изображение так, чтобы оно по высоте и(или) по ширине было растянуто по всему блоку, но картинка растягивается только по ширине (в качестве фона использую картинку 1200×700).
Если сделать экран очень маленьким в ширину, то виден пробел между фоном и концом блока.
Можно ли как-нибудь сделать так, чтобы фон пропорционально растягивался и по ширине и по высоте.
Я предполагаю, что изображение должно увеличиваться, если ему не хватает расстояния до одной из сторон.
задан 30 окт ’16 в 21:47
simply goodsimply good
53611 золотой знак44 серебряных знака1616 бронзовых знаков
Без воспроизводимого примера в вопросе сложно предположить в чем именно проблема. Вам подойдет именно background-size: cover;, он возможно не срабатывает по нескольким причинам. Например, само изображение фона содержит белые полосы, откройте изображение и посмотрите есть ли они там. Например, возможно, изображение не отцентрировано. Например, возможно другие стили перекрывают ваши, посмотрите в инспекторе. Или возможно сам блок, на который вы добавляете фон не на всю высоту или ширину нужного блока. Вот небольшой наглядный пример с фонами, возможно вам поможет:
display: inline-block;
padding: 6px;
color: #2d5857;
font-family: sans-serif;
font-weight: 600;
font-size: 20px;
background: white;
margin: 6px;
}
div {
color: white;
height: 100vh;
background-image: url(https://i.stack.imgur.com/WXyZl.jpg);
border: 6px solid yellow;
margin-bottom: 6px;
}
.bg_1 {
background-position: center;
}
.bg_2 {
background-size: cover;
}
.bg_3 {
background-size: contain;
}
.bg_4 {
background-size: cover;
background-position: center;
}
.bg_5 {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.bg_6 {
background-position: bottom 10px right 40px;
background-size: 60px 120px;
background-repeat: no-repeat;
}
<div>
<span>no styles</span>
</div>
<div class=»bg_1″>
<span>
background-position: center;
</span>
</div>
<div class=»bg_2″>
<span>
background-size: cover;
</span>
</div>
<div class=»bg_3″>
<span>
background-size: contain;
</span>
</div>
<div class=»bg_4″>
<span>
background-size: cover;
<br>background-position: center;
</span>
</div>
<div class=»bg_5″>
<span>
background-size: contain;
<br>background-repeat: no-repeat;
<br>background-position: center;
</span>
</div>
<div class=»bg_6″>
<span>
background-position: bottom 10px right 40px;
<br>background-size: 60px 120px;
<br>background-repeat: no-repeat;
</span>
</div>
ответ дан 18 сен ’18 в 8:13
kizosokizoso
9,03633 золотых знака2121 серебряный знак5151 бронзовый знак
Очевидно же, первое число по ширине, второе по высоте: https://developer.mozilla.org/ru/docs/Web/CSS/background-size
Если же мы напишем вот так background-size: 100%; то это интерпритируется как background-size: 100% auto; то есть высота будет выравниваться пропорционально, а нам это не нужно, по этому нужно явно указать что высота должна быть не авто а 100% от высоты блока. Изи катка
ответ дан 11 авг ’19 в 10:58
Используйте contain для свойства background-size:
background-size: contain;
ответ дан 31 окт ’16 в 6:38
MiklMikl
3,23466 серебряных знаков1414 бронзовых знаков
Попробуйте
background-size: cover;
ответ дан 27 мар ’18 в 19:23
margin: 5px;
width: 500px;
height: 200px;
border: 2px solid gray;
background: url(https://i.stack.imgur.com/qQoD4.jpg) no-repeat;
}
.block_one {
background-size: auto;
}
.block_two {
background-size: cover;
}
.block_three {
background-size: contain;
}
.block_for {
background-size: 100% 100%;
}
background-size: auto;
<div class=»block block_one»></div>
background-size: cover;
<div class=»block block_two»></div>
background-size: contain;
<div class=»block block_three»></div>
background-size: 100% 100%;
<div class=»block block_for»></div>
ответ дан 13 янв в 21:21
Sevastopol’Sevastopol’
16.2k1010 золотых знаков4949 серебряных знаков103103 бронзовых знака
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.
Источник