OT: img size width question ...

[Joseph Sinclair]

Sadly, the simple answer is that you probably cannot set width or height to an exact value on an img tag and trust that it will display at exactly that size.

The closest mechanism I ever found was simply to use a clipped div with a background image and constrain it on every measure using CSS:
<div style="background-color: #FFFFFF; background-image: url('image.jpg'); background-repeat: no-repeat; background-position: left top; background-size: contain; width: 270px; height: 360px; min-width: 270px; max-width: 270px; min-height: 360px; max-height: 360px">
<!-- possibly include some transparent content here to ensure the div gets displayed -->
</div>

On 03/28/2015 12:38 PM, joe at actionline.com wrote:
> 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).
> 
> 
> 
> ---------------------------------------------------
> PLUG-discuss mailing list - PLUG-discuss at lists.phxlinux.org
> To subscribe, unsubscribe, or to change your mail settings:
> http://lists.phxlinux.org/mailman/listinfo/plug-discuss
> 

-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 473 bytes
Desc: OpenPGP digital signature
URL: <http://lists.phxlinux.org/pipermail/plug-discuss/attachments/20150328/1a6fac20/attachment.pgp>