user3574939
user3574939

Reputation: 829

scaling large image to fit screen width using angular

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)?

Upvotes: 4

Views: 17310

Answers (2)

OJ Raqueño
OJ Raqueño

Reputation: 4561

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

Upvotes: 1

Moshe Shaham
Moshe Shaham

Reputation: 15974

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%;
}

Upvotes: 6

Related Questions