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
josephdtsAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Ray PaseurConnect With a Mentor Commented:
I think you've gotten pretty good answers to the question (basically, you've got "more" code when "less" would be better) so I don't really have anything to add to the explanations.  But I do have this scalable, floating Grumpy Cat.  It's completely self-contained, and you can use view source to see how it works.
https://iconoun.com/demo/grumpycat.html
0
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
This has been a problem forever.  Eric Meyer came up with a 'CSS reset' that is designed to remove almost all of the differences in padding and margin between the browsers.  Following that, you can apply your own CSS which will be more likely to produce the same results in all browsers.  http://meyerweb.com/eric/tools/css/reset/
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Scott Fell, EE MVEDeveloperCommented:
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.
0
 
Slick812Commented:
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?
0
 
josephdtsAuthor Commented:
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.
0
All Courses

From novice to tech pro — start learning today.