Как уменьшить ширину блока css
Перейти к содержимому

Как уменьшить ширину блока css

  • автор:

Размеры

Легкое создание элемента таким же широким или высоким (относительно его родителя) с помощью наших утилит ширины и высоты.

Утилиты ширины и высоты генерируются из карты размера $sizes Sass в _variables.scss . Включают поддержку по 25% , 50% , 75% и 100% по умолчанию. Измените эти значения так, как вам нужно, чтобы создать различные утилиты.

Ширина 100%

 class="w-25 p-3" style="background-color: #eee;">Ширина 25%  class="w-50 p-3" style="background-color: #eee;">Ширина 50%  class="w-75 p-3" style="background-color: #eee;">Ширина 75%  class="w-100 p-3" style="background-color: #eee;">Ширина 100% 

Высота 100%

 style="height: 100px; background-color: rgba(255,0,0,0.1);">  class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Высота 25%  class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Высота 50%  class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Высота 75%  class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Высота 100% 

Вы также можете использовать max-width: 100%; and max-height: 100%; при необходимости.

 class="mw-100" src=". " alt="Max-width 100%">

Max-height 100%

 style="height: 100px; background-color: rgba(255,0,0,0.1);">  class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100% 

Ширина (width) и высота (height) в HTML

В этой статье рассмотрим, как можно задавать ширину и какими свойствами стоит делать это. Для первого примера возьмём блочный элемент div. По умолчанию он имеет высоту равную нулю (если ничего не содержит) и занимает 100% ширины родительского элемента. Попробуем задать ему ширину в 200 пикселей и высоту в 150. Для этого используем CSS свойства width (ширина) и height (высота):

Получится такой результат:

Можно задавать ширину не только в пикселях, но и в процентах от ширины родительского элемента. Попробуем сделать это:

Получится такой результат:

К сожалению, задать высоту для блочного элемента в процентах не получится. Если написать «height:50%;», то в разных браузерах будет диаметрально противоположный результат, поэтому лучше считать такую запись ошибкой.

Только у одного элемента можно задать свойство height в процентах, а точнее у псевдоэлементов :before и ::after. Читайте о них в статье Псевдоэлементы (:before, ::after)

Максимальная и минимальная ширина (max-width и min-width)

Жёсткое ограничение ширины — это не лучший способ строить сайт. Потому что в таком случае появятся проблемы с адаптацией под мобильные и планшеты: ширина экрана может быть меньше ширины блока. Тогда часть сайта будет выходить пределы вёрстки сайта и появится горизонтальная прокрутка, чего у версии сайта на мобильном быть не должно. Поэтому вместо жёсткого задания ширины используется ограничение сверху через CSS свойство max-width. Мы знаем, что блочный элемент div пытается занять всю ширину родительского элемента, как будто по умолчанию у него есть свойство width и оно имеет значение 100%.

Результат будет аналогичен предыдущему примеру:

Но теперь, если вы возьмёте окно своего браузера и сузите до 400 пикселей и меньше, то увидите как контейнер div уменьшает свои размеры, чтобы не выпрыгивать за пределы вёрстки. Если же изменить «max-width:400px;» на «width:400px», то блок будет выходить за пределы родительского элемента:

По смыслу свойство min-width является диаметрально противоположным к max-width. Оно ограничивает минимальную ширину элемента, но не ограничивает максимальную.

Максимальная и минимальная высота (max-height и min-height)

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

Рассмотрим наглядный пример необходимости использования max-height. Допустим, что нам надо сделать чат, где пользователи сайта смогут обмениваться текстовыми сообщениями. Для этого нужно создать контейнер, который будет расти по мере появления в нём новых сообщений. Но как только div достигает определённой высоты, то перестаёт расти и появится полоса прокрутки. Используем следующий CSS код:

 
Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.

Весь текст не вместится в div. Поэтому из-за свойства «overflow-y: scroll;» появится полоса прокрутки:

Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.

Благодаря атрибуту contenteditable=»true» у тега div в примере, Вы можете изменить текст внутри контейнера. Попробуйте удалить и добавить несколько строк. Размер контейнера будет подстраиваться под количества текста в нём до тех пор, пока не станет быть равен 100px. Затем появится полоса прокрутки.

По смыслу свойство min-height является диаметрально противоположным к max-height. Оно ограничивает минимальную высоту элемента, но не ограничивает максимальную.

CSS — Высота блока относительно его ширины

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

Создание блока с высотой, которая имеет определённый процент от его ширины

CSS - Установка высоты блоку относительно его ширины

    Создать HTML структуру из 2 блоков:

.item-responsive { position: relative; /* относительное позиционирование */ } .item-responsive:before { display: block; /* отображать элемент как блок */ content: ""; /* содержимое псевдоэлемента */ width: 100%; /* ширина элемента */ } .item-16by9 { padding-top: 56,25%; /* (9:16)*100% */ } .item-responsive>.content { position: absolute; /* абсолютное положение элемент */ /* положение элемента */ top: 0; left: 0; right: 0; bottom: 0; } /* При необходимости (для блоков, имеющих данные классы) */ .item-4by3 { padding-top: 75%; /* (3:4)*100% */ } .item-2by1 { padding-top: 50%; /* (1:2)*100% */ } .item-1by1 { padding-top: 100%; /* (1:1)*100% */ }

Применение вышеприведённой технологии при создании карусели Bootstrap

Если вы не знакомы с Bootstrap и хотите узнать что это такое, то можете воспользоваться статьёй Введение в Bootstrap.

Рассмотрим пример, в котором вышеприведённую HTML структуру и CSS код будем использовать для отображения слайдов карусели Bootstrap.

В качестве изображений будем использовать следующие файлы:

  • carousel_1.jpg (ширина = 736px, высота = 552px, соотношение сторон (высота к ширине) = 1,33);
  • carousel_2.jpg (ширина = 1155px, высота = 1280px, соотношение сторон (высота к ширине) = 0,9);
  • carousel_3.jpg (ширина = 1846px, высота = 1028px, соотношение сторон (высота к ширине) = 1,8);
  • carousel_4.jpg (ширина = 1140px, высота = 550px, соотношение сторон (высота к ширине) = 2,07);
  • carousel_5.jpg (ширина = 800px, высота = 600px, соотношение сторон (высота к ширине) = 1,33);

Изображения будем задавать как фон. Это позволит использовать в карусели Bootstrap 3 изображения с не одинаковыми соотношениями сторон.

Скриншот карусели Bootstrap 3

HTML разметка карусели:

 
Слайд 1
Слайд 2
Слайд 3
Слайд 4
Слайд 5
Previous Next

CSS код карусели:

.item-responsive { position: relative; /* относительное позиционирование */ } .item-responsive:before { display: block; /* отображать элемент как блок */ content: ""; /* содержимое псевдоэлемента */ width: 100%; /* ширина элемента */ } .item-16by9 { padding-top: 56.25%; /* (9:16)*100% */ } .item-responsive>.content { position: absolute; /* абсолютное положение элемент */ /* положение элемента */ top: 0; left: 0; right: 0; bottom: 0; background-size: cover !important; }

Как уменьшить ширину DIV в зависимости от ширины соседнего?

Вопрос кажется весьма простым, но ответа найти пока так и не могу.
В общем div блоке шириной 700px есть три дочерних блока.
Первый (левый) и третий (правый) с минимальной шириной 150px, то есть их ширина может быть и чуть больше.
Второй же блок (средний) находится между ними и его ширина должна быть остаточной от этих двух. Но проблема в том, что второй блок может содержать много элементов. И если я задам допустим максимальную ширину для второго = 400px, то когда первый или третий блок увеличится, то третий блок «прыгает» вниз, а мне нужно, чтобы с увеличением ширины первого или третьего блока уменьшался размер второго и они все вписывались в один общий блок.
Ниже я приведу код и песочницу, чтобы можно было «потрогать», попробуйте у класса .article_footer1 или .article_footer3 увеличить ширину на пару пикселей и поймёте о чём я говорю.

   * < margin: 0; padding: 0; >.article_footer < height: 60px; width: 700px; background: #ccc; >.article_footer1 < float: left; min-width: 150px; background: #00cc00; height: 60px; >.article_footer2 < float: left; max-width: 400px; background: #cc0000; height: 60px; display: table; >.article_footer3 < float: right; min-width: 150px; background: #0000cc; height: 60px; >.tags  

one

first second third fourth fifth sixth seventh eighth ninth tenth eleventh twelfth

three

  • Вопрос задан более трёх лет назад
  • 1575 просмотров

2 комментария

Простой 2 комментария

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

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