Использование CSS Clip с процентами

Я пытаюсь отобразить только верхнюю половину изображения и нижнюю половину того же изображения в двух отдельных div.

Я пробовал с CSS-свойством clip, но он, похоже, не поддерживает% как единицу.

Это только я? У вас есть решение для отображения только половины изображения?

Ответы

Ответ 1

Обновление (через 5 лет):

Свойство клипа CSS теперь устарело. Вместо этого используйте вместо этого клип-путь (с учетом не-JS-решения), который позволяет вам указать фигуры с процентами. Пример:

/* Bottom half of image */ clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);

/* Top half of image */ clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);

Дополнительный пример создания треугольника с использованием процентов:

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Оригинал: Свойство CSS-клипа в настоящее время не поддерживает проценты: http://www.w3.org/TR/CSS2/visufx.html#propdef-clip, последний http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping p >

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

var heightOfImageToDisplay = image.height / 2;

Ответ 2

У вас может быть div как position: relative; и overflow: hidden; Сделайте изображение внутри position: absolute;

И управляйте тем, как изображение отображается, но устанавливая высоту в div и настраивая верхние и нижние свойства изображения.

Ответ 3

Если вы используете фиксированные изображения высоты и фиксированную высоту div, и вы делаете это вручную, почему бы не поместить изображение в качестве фона, с overflow:hidden и правильным background-position, чтобы он отображал только верхнюю из сверху вниз и снизу снизу вверх?

Ответ 4

Извините, что у меня недостаточно репутации, чтобы написать комментарий.

Абсолютно решение без JS.

Все, что вам нужно сделать, это

  • Создайте svg clipPath, который позволяет вам определить любой путь, который вы хотите.
  • Установить clipPathUnits = "objectBoundingBox" для гибкого пути клипа, который позволяет использовать определение пути процент

  • Примените clipPath к вашему коду css.

    #your-element {
   clip-path: url(#clipPathId);
}

Если вам нужна дополнительная информация, обратитесь к этому ответу fooobar.com/info/234723/...