473,836 Members | 1,504 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

1 New Member
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:

Expand|Select|Wrap|Line Numbers
  1.         <div id="loopedSlider" class="feature">
  2.  
  3.             <div class="container">
  4.  
  5.                 <div class="slides">
  6.  
  7.                     <div><img onclick="window.location='page1.html';" src="./images/image1.jpg" width="600" height="350" alt="Image 1" border="0" />
  8.                     </div>
  9.  
  10.                     <div><img onclick="window.location='page2.html';" src="./images/image2.jpg" width="600" height="350" alt="Image 2" border="0" /></div>
  11.  
  12.                     <div><img onclick="window.location='page3.html';" src="./images/image3.jpg" width="600" height="350" alt="Image 3" border="0" /></div>
  13.  
  14.                     <div><img onclick="window.location='page4.html';" src="./images/image4.jpg" width="600" height="350" alt="Image 4" border="0" /></div>
  15.  
  16.                     <div><img onclick="window.location='page5.html';" src="./images/image5.jpg" width="600" height="350" alt="Image 5" border="0" /></div>
  17.  
  18.                     <div><img onclick="window.location='page6.html';" src="./images/image6.jpg" width="600" height="350" alt="Image 6" border="0" /></div>
  19.  
  20.                     <div><img onclick="window.location='page7.html';" src="./images/image7.jpg" width="600" height="350" alt="Image 7" border="0" /></div>
  21.  
  22.                 </div>
  23.  
  24.             </div>
  25.  
  26.           </div>
  27.  
Here is the CSS page information:

Expand|Select|Wrap|Line Numbers
  1. #loopedSlider {
  2.     POSITION: relative
  3. }
  4. #loopedSlider .container {
  5.     POSITION: relative; LEFT: 50px; WIDTH: 600px; HEIGHT: 350px; OVERFLOW: hidden
  6. }
  7. #loopedSlider .slides {
  8.     POSITION: absolute; TOP: 0px; LEFT: 0px
  9. }
  10.  
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.

Expand|Select|Wrap|Line Numbers
  1.         <div id="loopedSlider" class="feature">
  2.  
  3.             <div class="container">
  4.  
  5.                 <div class="slides">
  6.  
  7.                     <div><img onclick="window.location='page1.html';" src="./images/image1.jpg" width="600" height="350" alt="Image 1" border="0" />
  8.                     </div>
  9.  
  10.                     <div><img onclick="window.location='page2.html';" src="./images/image2.jpg" width="600" height="350" alt="Image 2" border="0" /></div>
  11.  
  12.                     <div><img onclick="window.location='page3.html';" src="./images/image3.jpg" width="600" height="350" alt="Image 3" border="0" /></div>
  13.  
  14.                     <div><img onclick="window.location='page4.html';" src="./images/image4.jpg" width="600" height="350" alt="Image 4" border="0" /></div>
  15.  
  16.                     <div><img onclick="window.location='page5.html';" src="./images/image5.jpg" width="600" height="350" alt="Image 5" border="0" /></div>
  17.  
  18.                     <div><img onclick="window.location='page6.html';" src="./images/image6.jpg" width="600" height="350" alt="Image 6" border="0" /></div>
  19.  
  20.                     <div><img onclick="window.location='page7.html';" src="./images/image7.jpg" width="600" height="350" alt="Image 7" border="0" /></div>
  21.  
  22.                 </div>
  23.  
  24.             </div>
  25.  
  26.           </div>
  27.  
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).

Expand|Select|Wrap|Line Numbers
  1. #loopedSlider {
  2.     POSITION: relative
  3. }
  4. #loopedSlider .container {
  5.     POSITION: relative; LEFT: 50px; WIDTH: 600px; HEIGHT: 350px; OVERFLOW: hidden
  6. }
  7. #loopedSlider .slides {
  8.     POSITION: absolute; TOP: 0px; LEFT: 0px
  9. }
  10.  
Could someone please help by posting a corrected HTML/CSS code snippet, as to how I could do this?
Nov 23 '10 #1
1 7264
drhowarddrfine
7,435 Recognized Expert Expert
Just set the height/width using percentages.
Nov 23 '10 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

1
6072
by: Nick D. | last post by:
Hi All! I hope there's someone that might be able to help me with this...I'm a designer, not a developer, so i hope this isn't TOO basic. Basically, I have a topbar that's a simple JPG image that I would like to put at the top of a web page...is there any way to make that image resize to fill up the whole browser window regardless of screen resolution? I suppose basically I'm looking for some sort of autoresize script that affects...
4
6904
by: Bob Richardson | last post by:
Is it possible for an image to SHRINK (both height and width, keeping same h/w ratio) when the browser's width is reduced? It's easy to have both h & w increase, as needed, to fill up 100% of the <td>, but I don't see how to have the image shrink. Without JavaScript, the standard seems to be scrollbars when the browser shrinks. I'd like the picture to shrink in size and avoid the scrollbars.
4
9972
by: Matthew Louden | last post by:
It happend to me more than once. When I create web controls or move the positions in VS.NET, I encountered the following run-time errors: It doesn't matter what controls I create, the following 'checkbox' control is just an example. Control 'CheckBox1' of type 'CheckBox' must be placed inside a form tag with runat=server. Description: An unhandled exception occurred during the execution of the current web request. Please review the...
2
4118
by: John | last post by:
Hi I have dragged a few controls over to a web form. The html code generated is as follows; <asp:TextBox id="StaffCode" runat="server"></asp:TextBox>&nbsp; <asp:Button id="Submit" runat="server" Text="Submit"></asp:Button>&nbsp;&nbsp; <asp:RequiredFieldValidator id="RequiredFieldValidator1" runat="server" ErrorMessage="Code field can not be blank." Width="192px"
0
3446
by: davidr | last post by:
Hi, I have a panel that I load user Control in no problem. The problem arrises when I do a post back on one of these user controls. I have button it does a click event. In this click event I will do some database updates, then I will use reflection to call a method in the parent (this.page) to load the new user control. Its at this point after it loads the new user control that it throws the error "The control must be placed inside...
11
2361
by: eholz1 | last post by:
Hello PHP group, I am using some php code to check the size of images, and then resize or determine new dimension for the image. GD seems quite slow. It takes about 5 seconds (plus or minus) to calulate dimension for 7 jpeg images. I have a 700mhz processor (Pentium III, remember those??)! with almost a gb of memory. Is that the way GD is??? Here is a snippet of the dode I use: I pass
2
1524
by: ezhils | last post by:
How to resize the form controls based on the screen resolution?
0
1243
by: ramuksasi | last post by:
Hi, I've an asp.net .ascx form and a gridview on that form.I've placed that form on an .aspx. Now while I'm trying to import data from gridview to excel it is showing the error "Control 'GridView' must be placed inside a form tag with runat=server" see my code: <form action="readdata.aspx" runat="server"> <table> <tr> <td style="width: 100px"> <asp:Label ID="lblSearchBy"...
0
9820
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10548
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10254
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9374
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7792
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6979
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5826
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4452
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4016
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.