scaling large image to fit screen width using angular

Question

I would like to scale a large image's height/width using AngularJS so that it fits the screen on multiple devices (responsive). This website is an example of what I am trying to accomplish.

Does angular have a directive that can handle this or will I need to create a directive or factory to accomplish this task? Has anyone tried WURFL Image Tailor (WIT)?

Answer 1

In most cases, you don't need angularjs at all. This can be accomplished with css alone, using the background-size property.

For example, in order to scale to width:

.bg {
  background-size: 100% auto;
}

and to scale to height:

.bg {
  background-size: auto 100%;
}