SmartFrame Styling

Sizing considerations

As a general rule, SmartFrame tries to behave as closely to tag behaviour as possible.

It means that SmartFrame:

  • Maintains aspect ratio when scaled with CSS’s width, max-width, height and –sf-max-height CSS properties
  • Tries to occupy as much space as the original uploaded image, unless constrained with CSS properties

Differences between <img> and <smart-frame>

  • SmartFrame, by default, will not scale beyond 100% of parent’s container width.
  • When both width and height parameters are set SmartFrame will not stretch the image.
  • Standard max-height property is not supported, instead –sf-max-height has to be used.

Responsive image rendering

SmartFrame loads only the size of an image that’s necessary to display it sharp. It means, if you upload high resolution 3000 x 3000 image to the Image Cloud, but you use SmartFrame constrained with CSS’s max-width: 300px, SmartFrame will load 300px wide resized image from the Image Cloud, saving bandwidth and optimising your load times.

< Previous article: Installing Web Component
Next article: Image Management API >

Get in touch

Thanks for getting in touch
There has been a problem with the form submission, please try again later.