Link to home
Start Free TrialLog in
Avatar of josephdts
josephdts

asked on

How to display Images uniformly over Browsers?

I had this question after viewing HTML rendered differently in IE and Firefox.
My code below produces different results, see attached.
The following ASP code produces different results in IE, and Firefox,  or Chrome.
How do I make the results uniform? Here is my code:
An image is displayed by the HTML page:
<div class="InnerLeft" id="div1" style="border-style: hidden; border-color: #FFFFFF; width: 180px; height:639px; top: 50px; background-color: #FFFFFF; width: auto">
<img id="pic1" class="centered-and-cropped" style="javascript:resizeEventHandler(); margin-right: 1px;margin-left:1px;" />
</div>
The CSS Style:
div.InnerLeft {
        border-style : none;
        border-color: inherit;
        border-width: medium;
        width: 15%;
        position: fixed;
        float: left;
        left: 0px;
    }
/* pictures to crop */
    #pic1.centered-and-cropped { object-fit: cover;margin-top:auto; }
The Java Script:
function resizeEventHandler(div2) {
        var docWidth = document.documentElement.clientWidth;
        var docHeight = document.documentElement.clientHeight;
var img = document.getElementById("pic1");
        img.style.visibility = "hidden";
        img.style.width = "97%";
        img.style.height = "25%";
        }
PicDispaly.docx
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Please don't post Word files like 'docx' in your questions.  They make it more difficult because they have to be opened in another program.
SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Your best bet will be to create a sample page with just this basic script, upload it to your site and give us the link.  Either that or create the code in a playground like jsbin, jsfiddle or codepen.

Quickly, you are using image height and width as a percentage.  If you are going to work with percentage, then just set the width and let the height adjust as needed. (or vice versa).  If you want to maintain exact dimensions, then set the size of both inn pixels.

The reason you are having issues is probably because each browser has it's own defaults and your height and width dimensions may be a percent of a different physical size which is why Dave is offering the reset.

If you are trying to make your site responsive for mobile and desktop, try using either bootstrap http://getbootstrap.com/ or foundation http://foundation.zurb.com/.  The core of each is a responsive css grid (and reset) that takes care of adjusting sizes.

Also, you can't get wrapped up in exact size with web.  Leave that for your print products.  There are currently over 1000 different display sizes from 300 px wide to 3000 and all different ratios plus portrait and landscape. Some people have new high resolution displays' and then zoom in because of their presbyopia.  All of this changes how things are displayed so don't try and drive yourself nuts.
greetings josephdts, , I looked at your code work above, and can not understand what you are trying to do, in your javascript, you do not seem to do anything usefull -
function resizeEventHandler(div2) {
        var docWidth = document.documentElement.clientWidth;
// you get the client width and height , BUT NEVER use them, WHY?
        var docHeight = document.documentElement.clientHeight;

var img = document.getElementById("pic1");
// you hide the image with every Resize, WHY?
        img.style.visibility = "hidden";

        img.style.width = "97%";
//You use the same dimensions % here for every resize, WHY?
        img.style.height = "25%";
        }

Open in new window


In your CSS, you have unfounded and even conflicting css sets, you go all over the place with your BORDER sets in the -
<div class="InnerLeft" id="div1" style="border-style: hidden; border-color: #FFFFFF; width: 180px; height:639px; top: 50px; background-color: #FFFFFF; width: auto">

and in the InnerLeft CSS, you have the   border-style: hidden;  which means there is NO Border displayed, and then you set a border color, that can not be seen , WHY?

in the style for your <div> you set it to NON RESPONSIVE, fixed width and height as
    width: 180px; height:639px;
and you go to a ton of trouble in your CSS and javascript for a RESONSIVE image in width changes, but the <div> width never changes, so the responsive for image is a waist of time. . . . and , all your non-standard CSS and javascript, seems like no browser could correctly display the mixed up code work you use.  What are you trying to achieve in your display, surlely you must need a Responsive display for your <div> image container?
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of josephdts
josephdts

ASKER

I ended up using  img.style.minHeight and minHeight style properties for img object in JavaScript to produce reasonable results, even though not completely the same across browsers. To achieve better results, I basically have to ditch the old code completely.