Cropping images
By default, o-crop will contain the image without setting it's position or forcing the image to fill.
Available Aspect Ratios
By default, the available crops are --16:9, --4:3 and --1:1.
<div class="o-crop o-crop--16:9">
<img class="o-crop__content" src="/images/placeholder/doctor-16-9.jpg" alt="">
</div>
Cropping Images and Forcing Fill
You can also force the o-crop object's content to fill the available space.
<div class="o-crop o-crop--4:3 o-crop--fill">
<img class="o-crop__content" src="/images/placeholder/doctor-16-9.jpg" alt="">
</div>
Setting Focal Areas
By default, the crop will stick to the top left of the image. But the crop object also allows you to set the focal point of the crop with a variety of modifiers on the o-crop__content element. Below is the same image and aspect ratio as the example above, but we've changed the focal point of the crop with the modifier.
Available Focal Modifiers
If you're familiar with background-position the available modifiers will be familiar to you:
--left-top
--left-center
--left-bottom
--right-top
--right-center
--right-bottom
--center-top
--center
--center-bottom
<div class="o-crop o-crop--4:3 o-crop--fill">
<img class="o-crop__content o-crop__content--center" src="/images/placeholder/doctor-16-9.jpg" alt="">
</div>
Adding your own aspect ratios
You can override the default NYP Framework map for o-crop aspect ratios when configuring and including NYP Framework. See more in the installing and configuring NYP Framework section.
// Default
$nyp-crops: (
"1\\:1": (1:1),
"4\\:3": (4:3),
"16\\:9": (16:9)
) !default;
// Override defaults with your own.
$nyp-crops: (
"1\\:1": (1:1),
"4\\:3": (4:3),
"16\\:9": (16:9),
"golden": (1.618:1)
);