Compretend images allow you to load images into the space constraints of your page cropped and scaled around the parts of the images you care about.

Because we use Machine Learning to detect objects in an image you can use dynamic and user provided images and fit them intelligently within the design constraints of your page.

The images inside the blue box are generated by the code samples on the right.

 
<compretend-img
  src="https://site.com/image.jpg"
  crop="faces"
/>

The crop attribute specifies which detection method to use for objects in the image. The image is then cropped around all objects found in the image. 

<compretend-img
  src="https://site.com/image.jpg"
  crop="faces"
  scaled=true
  width="40"
/>

You can set the width of the img using the width property.

By default, the image will still be the origin crop size, but you can scale it down by setting the scaled property to true.

The image on the left is distorted to show that it has been scaled down, it's width would have been 40px if we had not manipulated it to illustrate scaling.

 
<compretend-img
  src="https://site.com/image.jpg"
  crop="faces"
  scaled=true
  width="117"
  margin="20"
/>

When scaling the image you can also add margin around the cropping. This is quite useful since most detections are for attributes within what you typically want for a photo. 

<compretend-img
    src="https://site.com/image.jpg"
    crop="people"
    scaled=true
    width="400"
    margin="20"
  />

When adding a margin the crop will never exceed the edges of the image.