How do I make the rotating image banner resize in all browsers?

HTML & CSS
1

I have a rotating JS banner of three images that loads like this; code is placed at bottom of page:

<script>
function loadbanner() {
    var elem = document.createElement('img');
    elem.class = 'slide';
    elem.id = 'slide';
    elem.src = '../images/2014-main1r.jpg';
    elem.style= 'width:100%; max-width:900px;';
    elem.alt = 'Rotating slide show';
    var currentDiv = document.getElementById('slideshow'); 
    currentDiv.appendChild(elem); 
};
</script>

<script>
    loadbanner();
</script>

It is width:100%: max-width:900px. However, it resizes the width only in Firefox. It remains at 900px in Chrome and IE. What should change to make it resize across all browsers? The div it goes into is unstyled:

<div id="slideshow"></div>

I am not using Jquery.

2

As you know, we need to see the HTML and CSS that is in play. Ideally a working page, or a link to the site. The JS means very little in the CSS Category.

3

You set the max width for 900px. So obviously it’s going to stop at that width. It’s set to 100% width but it should always stop at 900px since you’ve implied that the parent container is bigger than that. I’m not sure what the issue is. Going off what Ron said, we need a live site - it would also help me better understand what you are talking about. This seems to be relatively straight forward.

4

I will set it up as a live site soon. I guess I wasn’t clear in my OP. I’m not concerned with it stopping at 900px but it won’t go LOWER than 900px except on Firefox. On FF it resizes smaller, but on IE and Chrome it won’t resize smaller. That’s what the width:100% is supposed to allow, while the max-width:900px prevents it from going larger than 900px even though the container div is larger (but you knew that). Thanks!

5

Here is the test site: http://www.teamassociated.com/test/reedyrace/2015/offroad/index.html

On that one page (not the other pages, for only index.html has been updated), if you view the site in a browser window larger than 900px (which is the width of the top static image), then you should see the lower image banner rotate among three pictures. This is correct behavior.

If you are in FF, and resize the browser smaller, the rotating banner will shrink to fit = acceptable behavior.

If you are in IE or Chrome, it will not shrink to fit = unwanted behavior.

I thought it would be a CSS-style issue, so I put it in this category. (I may be wrong, though; perhaps the JS code needs to be changed or added to in order to accommodate the Chrome and IE browsers.)

6

Well, I was wrong – more JS is exactly what was needed. This addition under the current script solves the problem in IE and Chrome:

<script type="text/javascript">
// makes rotating banner resize smaller in Chrome and IE.
function resize() {
    var currentDiv1 = document.getElementById('slideshow'); 
    var currentDiv2 = document.getElementById('slide'); 
    slide.style.width = '100%'
    slide.style.height = 'auto'
    slide.style= 'width:100%;';
}
</script>

<script>
    loadbanner();
    window.onresize = resize;    
</script>

[Later]
Well, back to the drawing board – this doesn’t work in iPhone or Android! The 900px images are full size.

7

Good on you, Steven; and thank you very much for posting the fix.

Best2U

Just spotted the [Later] edit.

Still, the images should scale down as the window narrows. Let me look into that.

8

I posted an addendum - no go!