OT: img size width question ...

[joe at actionline.com]

I have tried setting both width and height, even setting both exactly the
same as the original image dimensions.  The results still come out wrong
(and the same amount wrong) on every computer and every browser.

I have also tried the "style="width: 270;" code and the results are
exactly the same as width= only.  Nothing that I have tried gives a
result even close to the same as the original image or desired width
specification.  I even tried creating a simple html code to display the
original size and the result is incorrect on every computer and every
browser ... to wit:

See the results here: http://www.upquick.com/temp/4x3results.jpg

The original test image is 400 pixels wide by 300 pixels tall.
Below is the actual html code I used to test the results:
------------------------------------

Test image size integrity.<br>
The original is 400 pixels wide by 300 pixels tall.<p>

Image 1 below left width=200.    
Image 2 below right width=300.<br>
Image 3 at the bottom is actual size 400.<p>

<img src=4x3.jpg width=200>    
<img src=4x3.jpg width=300><p>
<img src=4x3.jpg width=400><p>

--------------------------------------------------------
4x3results.jpg is a screen shot of the html code results:
Image 1 screen shot actually measures 278x211 pixels
Image 2 screen shot actually measures 582x536 pixels
Image 3 screen shot actually measures 775x586 pixels

It doesn't matter what monitor the html code is viewed on or what browser
is used. The resulting image sizes are never the same pixel width (and
dimensions) of what is specified by the 'img src' width or even the image
original.

All of the results are wacko.

Why?

How can I specify image size width and/or width and height that will
display at the specified size on SOME computer monitor with SOME browser?


--------------------------
Joseph Sinclair last wrote:
> Each browser does sizing according to it's own rules, but specifying only
> width generally throws it into aspect-ratio match mode which will be
> approximate.
> Further complicating things is that height and width are interpreted as
> "CSS Pixels" which are not always exactly screen pixels (depending on CSS
> and accessibility settings, particularly the display DPI settings).
> Try specifying both width and height to get a proper clipping box and see
> if that works or if you see the same 1.4:1 ratio on both height and width
> (which would indicate an accessibility ratio setting on the device or O/S
> side).
> You might also wish to (temporarily) set the CSS width and height
> properties and overflow mode as follows to see if the image really is
> outside what the browser *thinks* is the correct size : style="width:
> 270; height: NNN; overflow: hidden"  (replace NNN with the correct
> height, of course).
> If the image isn't clipped but is still 380px wide with the style set,
> then it's almost certain the device has accessibility or other settings
> to map multiple device pixels to one "CSS Pixel".
>
> If your target environment fully supports CSS3, you might try using the
> resolution style (style="width: 270; resolution: 1dppx !important") to
> explicitly request a 1:1 pixel ratio for that element (browsers get final
> say and may ignore resolution in favor of accessibility).