Sass and Compass for Designers

Image width and height helpers

There are also a couple of image helpers for automatically determining an image's height or width. Therefore, as long as we're not using SVG images (as they are vector-based they can have indeterminate dimensions), we can use these helpers to automatically get and set the height and width of appropriate CSS properties:

.buy-amazon-uk {
  display: block;
  background-image: image-url("amazon-co-uk.png");
  background-size: image-width("amazon-co-uk.png") image-height("amazon-co-uk.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: image-height("amazon-co-uk.png");
  width: image-width("amazon-co-uk.png");
}

In this example, we are using these helpers to not only set the background-size property but ...