Javascript Sizing Image Help

Hey there, I am currently working on a free "pic of the day" script
via http://www.mediacollege.com/internet/javascript/image/daily.html

Now my problem is, how to I size the images to fit my site?
Is it done from the following coding (javascript)

<script type="text/javascript"><!--
var imlocation = "Global-Training-images/";
function ImageArray (n) {
   this.length = n;
   for (var i =1; i <= n; i++) {
     this[i] = ' '
   }
}
function linkArray (n) {
   this.length = n;
   for (var i =1; i <= n; i++) {
     this[i] = ' '
   }
}
image = new ImageArray(31);
image[0] = 'Standing Military Press - (Global-training.net).jpg';
image[1] = 'monday.gif';
image[2] = 'tuesday.gif';
image[3] = 'wednesday.gif';
image[4] = 'thursday.gif';
image[5] = 'friday.gif';
image[6] = 'saturday.gif';
image[7] = 'saturday.gif';
image[8] = 'saturday.gif';
image[9] = 'saturday.gif';
image[10] = 'saturday.gif';
image[11] = 'saturday.gif';
image[12] = 'saturday.gif';
image[13] = 'saturday.gif';
image[14] = 'saturday.gif';
image[15] = 'saturday.gif';
image[16] = 'saturday.gif';
image[17] = 'saturday.gif';
image[18] = 'saturday.gif';
image[19] = 'saturday.gif';
image[20] = 'saturday.gif';
image[21] = 'saturday.gif';
image[22] = 'saturday.gif';
image[23] = 'saturday.gif';
image[24] = 'saturday.gif';
image[25] = 'saturday.gif';
image[26] = 'saturday.gif';
image[27] = 'saturday.gif';
image[28] = 'saturday.gif';
image[29] = 'saturday.gif';
image[30] = 'saturday.gif';
image[31] = 'saturday.gif';
link = new linkArray(31);
link[0] = 'http://global-training.net/exercises-detail.aspx?id=522&g=2';
link[1] = 'monday.gif';
link[2] = 'tuesday.gif';
link[3] = 'wednesday.gif';
link[4] = 'thursday.gif';
link[5] = 'friday.gif';
link[6] = 'saturday.gif';
link[7] = 'saturday.gif';
link[8] = 'saturday.gif';
link[9] = 'saturday.gif';
link[10] = 'saturday.gif';
link[11] = 'saturday.gif';
link[12] = 'saturday.gif';
link[13] = 'saturday.gif';
link[14] = 'saturday.gif';
link[15] = 'saturday.gif';
link[16] = 'saturday.gif';
link[17] = 'saturday.gif';
link[18] = 'saturday.gif';
link[19] = 'saturday.gif';
link[20] = 'saturday.gif';
link[21] = 'saturday.gif';
link[22] = 'saturday.gif';
link[23] = 'saturday.gif';
link[24] = 'saturday.gif';
link[25] = 'saturday.gif';
link[26] = 'saturday.gif';
link[27] = 'saturday.gif';
link[28] = 'saturday.gif';
link[29] = 'saturday.gif';
link[30] = 'saturday.gif';
link[31] = 'saturday.gif';
var currentdate = new Date();
var imagenumber = currentdate.getDay();
document.write('<a href="' + link[imagenumber] + '"><img src="' + imlocation + image[imagenumber] + '" border="0"></a>');
//--></script>

Code (markup):

Or from my CSS

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dd,dt,
table,tr,td,th,p,img {
    margin:0;
    padding:0;
}

img, fieldset {
    border:none;
}

hr {
    display:none;
    /*
        HR in my code are for semantic breaks in topic/section, NOT
        style/presenation, so hide them from screen.css users
    */
}

/* base template layout */

body {
    padding:2em 0;
    min-width:40em;
    font:normal 85%/175% "segoe ui",arial,helvetica,sans-serif;
    background:#C84 url(images/bodyBackground.jpg) top center fixed;
}

body:before {
    content:" ";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    -webkit-box-shadow:
        inset 0 0 128px 96px rgba(96,0,0,0.4);
    box-shadow:
        inset 0 0 128px 96px rgba(96,0,0,0.4);
}

a {
    transition:color 0.3s;
}

#top {
    position:relative; /* depth sort over generated content */
    max-width:52em;
    margin:0 auto;
    background:#FFC;
    -webkit-border-radius:0.5em;
    border-radius:0.5em;
    -webkit-box-shadow:
        0 0 1em 0.25em rgba(0,0,0,0.4);
    box-shadow:
        0 0 1em 0.25em rgba(0,0,0,0.4);
}

* html #top {
    /*
        Legacy IE can't handle min or max-width, so shove a fixed width at them,
        OH WELL. They should be thankful we bother thinking of them at all!!!
    */
    width:40em;
}

h1 {
    padding:0.5em;
    text-align:center;
    font:bold 200%/120% "segoe ui",arial,helvetica,sans-serif;
}

h2 {
    padding:1em;
    text-align:center;
    font:bold 150%/120% "segoe ui",arial,helvetica,sans-serif;
    border-top:2px solid #ECA;
}

h3 {
    padding:0 1.2em 0.4em;
    font:bold 125%/120% "segoe ui",arial,helvetica,sans-serif;
}

p,
.qna {
    padding:0 1.5em 1.5em;
}

ul, ol {
    padding:0 1.5em 1em 3.5em;
}

li {
    padding-bottom:0.5em;
}

#mainMenu,
#footer ul {
    list-style:none;
    padding:0.5em;
    text-align:center;
    background:#FF8;
    border-top:2px solid #ECA;
}

#mainMenu li,
#footer li {
    display:inline;
    padding:0;
}

#mainMenu a,
#footer li a {
    display:inline-block;
    padding:0 0.75em;
    text-decoration:none;
    font:bold 120%/120% "segoe ui",arial,helvetica,sans-serif;
    color:#840;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover,
#footer li a:active,
#footer li a:focus,
#footer li a:hover {
    color:#F60;
}

.plate {
    display:block;
    margin:0 auto 1.5em;
}

.qna dt {
    padding-bottom:0.5em;
}

.fancyLink,
.fancyLink span {
    display:inline-block;
    vertical-align:bottom;
    color:#FFF;
}

.fancyLink {
    margin-top:0.5em;
    padding:1px;
    line-height:2em;
    background:#FFF;
    border:1px solid #000;
}

.fancyLink span {
    background:#F80;
    padding-left:0.5em;
    text-shadow:
        0 0 2px #000,
        0 0 3px #000;
    -webkit-box-shadow:
        inset 0 -0.5em 0.5em rgba(0,0,0,0.25),
        inset 0 0.5em 0.75em rgba(255,255,255,0.6);
    box-shadow:
        inset 0 -0.5em 0.5em rgba(0,0,0,0.25),
        inset 0 0.5em 0.75em rgba(255,255,255,0.6);
}

.fancyLink span span {
    padding:0 0.5em;
    margin-left:0.2em;
    background:#222;
    border-left:1px solid #FFF;
}

#footer {
    text-align:center;
    padding-bottom:1.5em;
}

#footer ul {
    margin-bottom:1.5em;
    border-bottom:2px solid #ECA;
}

@media (max-width:46em) {
    body {
        min-width:192px;
        padding:0;
        line-height:1.5em;
    }
    #top {
        -webkit-border-radius:0;
        border-radius:0;
    }
    h1 {
        padding:0.5em;
    }

    h2 {
        padding:1em;
    }

    h3 {
        padding:0 0.4em 0.4em;
    }
    p,
    .qna {
        padding:0 0.5em 1.5em;
    }
    ul, ol {
        padding:0 0.5em 1em 2.5em;
    }
    #mainMenu,
    #footer ul {
        padding:0.25em 0;
    }
    #mainMenu a,
    #footer li a {
        padding:0.5em 0.75em;
    }
}

@media (max-width:512px) {
    * {
        -webkit-text-size-adjust:none;
        -ms-text-size-adjust:none;
    }
}

@media
    (-webkit-min-device-pixel-ratio:2) and (min-width:1600px),
    (min-resolution:172dpi) and (min-width:1600px)
{
    html { font-size:200%; }
}

Code (markup):

Note..a few members were helpful enough to help me on the CSS to make my site more mobile friendly
https://forums.digitalpoint.com/threads/how-do-i-make-my-html-css-website-mobile-friendly.2779172/

 

There should be a CSS property to add under the border one you have seen. I'm not sure what it is as I'm still learning myself.

property:value;

Regards,
Chris

 

Was hoping there was a code or something to add....cause that would be easier than making all the images the same size. ..Used to use the "width" and "height" code (attributes?) In the image code but thinking that not good coding...

 

img.setAttribute("width", realWidth);
  img.setAttribute("height", realHeight);

Code (markup):

Thanks...now to figure out where to put it in the javascript (daily image script) that I linked too in my first posting.

<script type="text/javascript"><!--
var imlocation = "Global-Training-images/";
function ImageArray (n) {
   this.length = n;
   for (var i =1; i <= n; i++) {
     this[i] = ' '
   }
}
function linkArray (n) {
   this.length = n;
   for (var i =1; i <= n; i++) {
     this[i] = ' '
   }

Code (markup):

All this stuff, quite the learning curve for me....

 

Thanks for all the replies and help. Been fooling around with some of the coding provided but it became overwhelming for me. So, decided to have all the images the same size before uploading them. Should have thought of that before I got heavily involved..lol