O'Reilly logo

Mastering PhoneGap Mobile Application Development by Kerri Shotts

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Image sizing

Most HTML elements are responsive by default, assuming we don't use pixel-based units with regard to their origin or size. Bitmap (or raster) images are a different story; they aren't resizable without losing information, so we have to deal with them separately.

There are three scenarios with respect to images:

  • Rendering an image with a specific size, such as an icon or a thumbnail
  • Rendering an image that needs to resize itself to the width of the viewport, as in a header image
  • Rendering a background image that needs to fill the viewport

In all these cases, we want the image to be as sharp as possible and require as little up sampling as possible, since this will result in blurry images. If we're rendering icons, we should also attempt ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required