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)?
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%;
}
The website you linked to uses the background-image trick: instead of resizing the image, it uses an image as the background of a div instead, then it applies the appropriate styles to the div:
height: 840px;
background-image: url('pathToImage');
background-size: cover;
background-position: center center;
This is achieved using CSS only - no need for Angular or even JavaScript.
WURFL Image Tailor does something different - it actually serves a different sized image (image size and file size) based on screen width. This is useful when you don't want browsers on smaller screens to download images in their original resolution and size. (The assumption is that smaller screens mean mobile and mobile means slower connections.)
