Resize images placed inside DIV based on screen/browser size width

[Chris Rock]

I have a "Looped Slider" that displays a series of images, but I've had to manually resize the images (using height/width tags), but I'm looking for some code that will take the width of the DIV, and resize/adjust the height/width of the images automatically.

Here is the code for the looped slider:

        <div id="loopedSlider" class="feature">

        	<div class="container">

                <div class="slides">

                    <div><img onclick="window.location='page1.html';" src="./images/image1.jpg" width="600" height="350" alt="Image 1" border="0" />
                    </div>

                    <div><img onclick="window.location='page2.html';" src="./images/image2.jpg" width="600" height="350" alt="Image 2" border="0" /></div>

                    <div><img onclick="window.location='page3.html';" src="./images/image3.jpg" width="600" height="350" alt="Image 3" border="0" /></div>

                    <div><img onclick="window.location='page4.html';" src="./images/image4.jpg" width="600" height="350" alt="Image 4" border="0" /></div>

                    <div><img onclick="window.location='page5.html';" src="./images/image5.jpg" width="600" height="350" alt="Image 5" border="0" /></div>

                    <div><img onclick="window.location='page6.html';" src="./images/image6.jpg" width="600" height="350" alt="Image 6" border="0" /></div>

                    <div><img onclick="window.location='page7.html';" src="./images/image7.jpg" width="600" height="350" alt="Image 7" border="0" /></div>

                </div>

            </div>

      	</div>

Here is the CSS page information:

#loopedSlider {
	POSITION: relative
}
#loopedSlider .container {
	POSITION: relative; LEFT: 50px; WIDTH: 600px; HEIGHT: 350px; OVERFLOW: hidden
}
#loopedSlider .slides {
	POSITION: absolute; TOP: 0px; LEFT: 0px
}

I would like the width and height of the images to adjust automatically in the main HTML page, and would also like the "loopedSlid er .container" width and height to adjust automatically in the CSS page (based on the web browser's width).

So if a web browser window was resized, it would resize the "loopedSlid er .container", and also resize the width and height of the images (in the div class "slides")

I would like the image width and height to be adjusted based on the width of the browser window.

I would like the image width to be 70% of the browser window width.

I would like a 0.58 aspect ratio in the width/height of the image. So if a browser window was 800 wide, it would then make the LoopedSlider image width="600" (75% of browser width) and the image height would be height="348" (58% of image width)


If the width of the browser window is 800, then I would like to make the image width="600" and height="350"

I would like the image width to be 75% of the browser width, and would like the image height to be 58% (.58 aspect ratio) of the image width.

If the browser window is 1000 wide, then I would like to the images to be width="750" and height="435".

I'm looking for some code that will detect the current browser width and resize the "width" and "height" variables accordingly.

        <div id="loopedSlider" class="feature">

        	<div class="container">

                <div class="slides">

                    <div><img onclick="window.location='page1.html';" src="./images/image1.jpg" width="600" height="350" alt="Image 1" border="0" />
                    </div>

                    <div><img onclick="window.location='page2.html';" src="./images/image2.jpg" width="600" height="350" alt="Image 2" border="0" /></div>

                    <div><img onclick="window.location='page3.html';" src="./images/image3.jpg" width="600" height="350" alt="Image 3" border="0" /></div>

                    <div><img onclick="window.location='page4.html';" src="./images/image4.jpg" width="600" height="350" alt="Image 4" border="0" /></div>

                    <div><img onclick="window.location='page5.html';" src="./images/image5.jpg" width="600" height="350" alt="Image 5" border="0" /></div>

                    <div><img onclick="window.location='page6.html';" src="./images/image6.jpg" width="600" height="350" alt="Image 6" border="0" /></div>

                    <div><img onclick="window.location='page7.html';" src="./images/image7.jpg" width="600" height="350" alt="Image 7" border="0" /></div>

                </div>

            </div>

      	</div>

and also resize the CSS "loopedSlid er .container" width and height automatically so that the loopedSlider images (slides) will fit. (Make the "loopedSlid er .container" width a percentage of the browser width (i.e. 75% of browser width).

#loopedSlider {
	POSITION: relative
}
#loopedSlider .container {
	POSITION: relative; LEFT: 50px; WIDTH: 600px; HEIGHT: 350px; OVERFLOW: hidden
}
#loopedSlider .slides {
	POSITION: absolute; TOP: 0px; LEFT: 0px
}

Could someone please help by posting a corrected HTML/CSS code snippet, as to how I could do this?

[drhowarddrfine]

Just set the height/width using percentages.