Solved

Stretch image to half size of screen

Posted on 2010-11-18
2
398 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 500 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

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

777 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