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
- 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.