Модульная высота div (кратная 100px) в чистом CSS - PullRequest
Новая
       4

Модульная высота div (кратная 100px) в чистом CSS

2 голосов
/ 04 августа 2011

У меня есть div с повторяющимся фоном.Фоновое изображение 50px x 50px.

Поскольку повторяющееся изображение имеет высоту 50px, я бы хотел, чтобы высота div была в MULTIPLES OF 50 .Это будет гарантировать, что фоновое изображение повторяется, но не обрезается по краю div.

  1. Есть ли простой способ CSS сделать это без медиазапросов?
  2. Есть ли способ сделать это с медиазапросами?
  3. Я знаю, что это возможно с JavaScript, но я предпочел бы не использовать его (есть много объектов с этим типом стилей, и, скорее всего, не будет иметь$.each() их всех).

1 Ответ

3 голосов
/ 04 августа 2011

Единственный способ приблизиться к этому с помощью реализованного в настоящее время CSS - это border-image, но он не будет работать точно так, как вы хотите. Вместо того, чтобы делать размер элемента кратным 50px, вы должны масштабировать компоненты 50px так, чтобы они соответствовали элементу.

Это будет работать примерно так: создайте изображение размером 150 на 150 пикселей из девяти плиток существующего фонового изображения, а затем укажите правило примерно так: 

border-image: url(bg.png) 50 round fill;

Ключевое слово round означает, что средние срезы изображения будут повторяться и растягиваться в зависимости от элемента. Это действительно сработает только в том случае, если вы установите минимальные размеры элемента не менее 150 пикселей на квадрат. Что касается практичности, поддержка немного нестабильна , я не думаю, что какие-либо браузеры уже реализовали текущую спецификацию. Вы можете не указывать ключевое слово fill при использовании специфичных для поставщика свойств.

Кроме этого, модуль CSS3 Line Grid настроен на разрешение размеров элементов, кратных высоте строки, но реализации все еще далеко.

...