Ограничение ширины и высоты

Ширина элемента ограничивается при помощи свойств CSS2, которые я называю свойствами минимума-максимума (min-max properties). Для области содержимого можно задать минимальные размеры с помощью свойств min-width и min-height. Аналогичным образом размеры элемента могут быть ограничены свойствами max-width и max-height. Прозрачность имен этих свойств практически устраняет необходимость пояснений. С первого взгляда неочевидно, но если подумать, вполне логично, что значения всех этих свойств не могут быть отрицательными. Internet Explorer для Windows вплоть до версии IE7 не поддерживал свойства min-height, min-width, max-height и max-width.

Следующие стили зададут для элементов ширину и высоту минимум 10em и 20em соответственно:

top: 10%; bottom: 20%; left: 50%; right: 10%;
min-width: 10em; min-height: 20em;

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

top: 10%; bottom: auto; left: 50%; right: 10%; height: auto;
min-width: 15em;

Здесь ширина элемента должна составлять не более 40% ширины блока-контейнера, но не менее 15em.


Размеры bottom и height также изменены и определяются автоматически. В результате высота элемента будет такой, какая необходима для отображения содержимого независимо от того, насколько узким он становится (но, конечно же, не уже 15em!). Роль, которую играет значение auto в свойствах height и width позиционированных элементов, рассматривается в следующем разделе. Ситуацию можно изменить до обратной и ограничить размеры элемента сверху, задав свойства max-width и max-height. Рассмотрим вариант, когда по какой-то причине требуется, чтобы элемент составлял три четверти ширины его блока-контейнера, но был не шире 400 пикселов. Для этого подойдут такие стили:

left: 0%; right: auto; width: 75%; max-width: 400px;

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

p.aside {float: left; width: 40em; max-width: 40%;}

Здесь для перемещаемого элемента задается ширина 40em, если только это значение не будет превышать 40% ширины блока-контейнера, а в этом случае перемещаемый элемент будет сужен.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Блок-контейнер
Блоки-контейнеры и абсолютно позиционированные элементы
Видимость элементов
Задание ширины и высоты
Запрет на обтекание