Capture the user’s attention and communicate your message
Use for images with no responsive qualities.
Apply rules to an image using ratio and crop properties. The below example is cropped using top alignment with the aspect ratio set as 9:16.
Use the cover property to resize the background image to fill the entire container.
Apply a radius to an image.
The below example is cropped using center alignment with the aspect ratio set as square and the radius set as rounded.
The below example is cropped using center alignment with the aspect ratio set as square and the radius set as circle.
CdrImg will bind any event handlers to the img
element that it wraps. This is intended to support attaching an error handler function in case an image does not load, but can be used for any HTML/JS event. Note that because images are usually not "interactive" elements you should not bind click handlers to them.
<cdr-img
src=""
@error="eventHandler"
/>
To ensure that usage of this component complies with accessibility guidelines, provide descriptive text for alt
attribute for:
This component has compliance with WCAG guidelines by:
alt
attribute into the image element by defaultalt
attribute is needed to meet accessibility requirements for decorative imagesREI image requirements are described on the Launch and DefaultShop Image Sizes (opens new window) page.
Use conventional aspect ratios:
Images are cropped on y-axis with top value and on x-axis with left, x-center, and right values
Images are cropped on y-axis with y-center value and on x-axis with left, x-center, and right values
Images are cropped on y-axis with bottom value and on x-axis with left, x-center, and right values
<img>
element, add:
alt
attributerole="presentation"
alt
attributealt
attribute should contain the same words that appear in the imagealt
attribute to only one image for the entire groupalt
attributealt
attribute that describes the purpose or destination of the linkThis component will bind any attribute that a native HTML img element (opens new window) accepts.
alt
name
string
type
empty
default
Sets the alternate text attribute for the image. Default value is empty.
src
name
string
type
empty
default
Sets image source URL.
lazy
name
boolean
type
false
default
Setting this value to true will enable lazy loading for internal applications. Lazy loading is provided using the the FEDPACK rei-lazy-image-loader project.
lazyOpts
name
object
type
array
default
For internal projects. Provide an object of lazy options as defined on within the rei-lazy-image-loader API. This will output each option as a `data-` attribute on the root element.
ratio
name
string
type
N/A
default
Sets the aspect ratio and scales the image as large as possible without cropping or stretching the image (See CSS background-size: contain). Possible values: { 'auto' | 'square' | '1-2' | '2-3' | '3-4' | '9-16' | '2-1' | '3-2' | '4-3' | '16-9' }
ratioSm
name
string
type
N/A
default
Sets the aspect ratio at the small breakpoint. Possible values: { 'auto' | 'square' | '1-2' | '2-3' | '3-4' | '9-16' | '2-1' | '3-2' | '4-3' | '16-9' }
ratioMd
name
string
type
N/A
default
Sets the aspect ratio at the medium breakpoint. Possible values: { 'auto' | 'square' | '1-2' | '2-3' | '3-4' | '9-16' | '2-1' | '3-2' | '4-3' | '16-9' }
ratioLg
name
string
type
N/A
default
Sets the aspect ratio at the large breakpoint. Possible values: { 'auto' | 'square' | '1-2' | '2-3' | '3-4' | '9-16' | '2-1' | '3-2' | '4-3' | '16-9' }
crop
name
string
type
N/A
default
Requires ‘ratio’ to define the starting position for cropping image. Image will overflow and not be displayed. Possible values: { ‘left’ | ‘x-center’ | ‘right’ | ‘top’ | ‘y-center’ | ‘bottom’ }
cover
name
boolean
type
N/A
default
Requires ‘ratio’ to scale the image to be as large as possible to fill the entire background area. See CSS background-size: cover.
radius
name
string
type
N/A
default
Sets a border radius to the root element. Possible values: { 'circle' | ‘rounded’ }
modifier
name
string
type
N/A
default
Modifies the style variant for this component. Possible value: { ‘responsive’ }
Find more information about using Slots in the article Getting Started as a Developer.
default
name
Set the innerHTML for CdrImg. This includes text and html markup.
contain
which resizes the background image to make sure it is fully visiblecover
propertycrop
propertycover
and crop
properties togetherratio
propertyratio
propertycrop=”top left”
):
left
: Orients the image to its horizontal leftright
: Orients the image to its horizontal rightx-center
: Orients the image to its horizontal centertop
: Orients the image to its topbottom
: Orients the image to its bottomy-center
: Orients the image to its vertical centercircle
or rounded
(for rounded rectangle)cdr-core.css
Following variants are available to the cdr-img
modifier attribute:
Value | Description |
---|---|
'responsive' | Sets the image to display block and 100% width |
For internal applications with large images or images that would benefit from changes due to platform or breakpoint, use lazy load properties to integrate with the rei-lazy-image-loader project (opens new window).