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

Question

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

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

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

Answer 1

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

Свойство CSS clip теперь устарело.Вместо этого рассмотрите возможность использования clip-path (с учетом решения, отличного от 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 clip в настоящее время не поддерживает проценты: http://www.w3.org/TR/CSS2/visufx.html#propdef-clip, последний http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping

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

var heightOfImageToDisplay = image.height / 2;

Answer 2

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

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

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

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

3. Примените clipPath в своем коде CSS.

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

Если вам нужна дополнительная информация, пожалуйста, отправьте ответ https://stackoverflow.com/a/28312070/5692151

Answer 3

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

Answer 4

Вы можете иметь div как position: relative; и overflow: hidden; Имейте изображение внутри как position: absolute;

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