|
Due to the algorithm used to scale images, hard edges between adjoining highly contrasting elements in the image will get jagged. This is especially prominent in computer generated images. There is really not much you can do to prevent that phenomenon if you want 100% height coverage of the page in all kinds of devices.
If some extra whitespace around the image in higher resolution displays is an acceptable trade-off, you can size your image at the source(from SVG for example) so that its height is conformant with the lowest resolution device that you intend to support and then use the resulting images actual height in the max-height property of the image in CSS. This will make the image show at that height regardless of the devices resolution, and since it is sized to fit on the lowest resolution device it will not get resized in higher resolution displays.
|