Solved

resize images to 100% width, keep height in proportion?

Posted on 2006-11-05
3
1,364 Views
Last Modified: 2012-06-21
Hi,
I'm trying to show an image or a swf (depending on whether the user has flash) inside a browser window that has been already resized to full screen width and height.

The image & swf are 2:1 proportions, and I need to find a way to display them at 100% width, and to set the height to half of the height.

I have some of the pieces, but can't connect them...

for example var imgWidth = screen.availWidth; and var imgHeight = imgWidth / 2; gives me the height & width I want, but how do I write javascript variables inside an html tag?

ie <img src="images/abc.jpg" width="imgWidth" height="imgHeight"> - how do I write the width & height variables here?

thanks...



0
Comment
Question by:hc0904pcd
  • 2
3 Comments
 
LVL 26

Accepted Solution

by:
DireOrbAnt earned 500 total points
ID: 17878569
document.write('<img src="images/abc.jpg" width="'+imgWidth+'" height="'+imgHeight+'">');

However that's not the best way. Best way is to stick an img tag with an id like id="MyImg"
Then:
document.getElementById('MyImg').width = imgWidth;
document.getElementById('MyImg').height = imgHeight;
0
 
LVL 6

Author Comment

by:hc0904pcd
ID: 17879753
thanks, that's exactly what i needed :)
0
 
LVL 26

Expert Comment

by:DireOrbAnt
ID: 17882953
:)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Debugging step-by-step Jquery/Javascript 6 57
Timerpicker in javascript 4 35
reveal text field based on selected 10 24
jQuery AJAX Redirects Without Response/Error 10 42
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now