Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Stretch image to half size of screen

Posted on 2010-11-18
2
Medium Priority
?
408 Views
Last Modified: 2012-05-10
Hopefully quite a simple one...

I have an image (radial gradient) which is absolutely positioned top left and is 300px x 300px

I'd like to stretch the image to half the browser window (keeping aspect ratio if poss).

Something as simple as <img src=gradient.jpg width=150%> works in IE but not in mozilla. It also doesn't size to exactly half.

What's the best way to implement something like this?  (if i need to use js that's fine)
0
Comment
Question by:Type25
2 Comments
 
LVL 52

Accepted Solution

by:
Carl Tawn earned 2000 total points
ID: 34162336
Perhaps something like the following:
<html>
<head>
   <script language="javascript" type="text/javascript">

      function resizeImage()
      {
          var img = document.getElementById('myImage');
	  img.width = document.body.offsetWidth / 2;
      }

   </script>
</head>
<body onload="resizeImage();">
   <img id="myImage" src="logo.gif" />
</body>
</html>

Open in new window

0
 
LVL 9

Author Closing Comment

by:Type25
ID: 34162364
That did it. Thanks
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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 …
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

580 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