2

Here is the problem I put to you.

I have an page where a random image is placed using some hand written Javascript code. the premise is that the images are all different sizes.

Now I want to display the image so that either it takes up most of the screen ( style=" width: 95%;" ) or that the image doesn't resize higher then it's own maximum size. So in essence the image is always fully displayed fully (horizontally at least).

What i don't want to do is hardcode anything but the image locations. So I want to dynamically somehow fetch the max sizes and force the page to recognize them.

I've been looking at finding Javascript (and JQuery by suggestion) functions and CSS code to manage what I am looking for, but to no avail. Part of the problem may be me not finding a reliable readable source, having learnt some stuff in school but honestly not having a proper clue for what I am looking for. And right now I seeing my options I feel like what I ask cannot be done.

However I pose the problem here. And also paste the code I had so far. Any suggestions, alterations and help is welcome. I don't know and can't find it.

<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<script type="text/javascript" src="./js/jquery-1.8.1.min.js">
<script type="text/javascript">
var links = ['./img/1-teech.png', './img/2-slingshot.png', './img/3-upright.jpg', './img/4-drawing.png', './img/5-wing.png', './img/6-flying.png', 'img/7-filly.png'];
var credits = ['Pencils', 'Pencils', 'Eljordo', 'Ezynell', 'Laydee Kaze', 'Yu Chie', 'Honey Puff'];
function setRandomImage()
{
setImage(getRandomInt(links.length - 1));
}

function setImage(var i)
{
document.getElementById('tichimage').src = links[i];
document.getElementById('credits').innerHTML = credits[i];
}

function getRandomInt(max)  
{  
  return Math.floor(Math.random() * (max + 1));  
} 
</script>
</head>

<body>
<p align="center"><img src="" alt="Tich" style=" width: 95%;" id="tichimage"/></img>     <br /></p>
<p align="center">By <span id ="credits"></span></p>
<p align="center"><img src="./img/random-button.png" alt="Random Image" onclick="setRandomImage()"/></p>
<script type="text/javascript">
setRandomImage();
</script>
</body>
</html>

I realize that not everything I am doing is exactly 100% to web standards, but ehhhhh. It was designed as more of a test page for me to do stuff in, all the previous stuff I did myself a little. but the thing I want now seems too difficult. And I don't know where to go.

Thanks for helping

Tich
  • 85
  • 1
  • 6

1 Answers1

0

Here's a working example that will capture the height and width of the image and assign it to a variable: http://jsfiddle.net/charlescarver/BrwAj/2/

var img = new Image();
img.src = $("#tichimage").attr("src");
img.onload = function() {
    var width = this.width;
    var height = this.height;
}
Charlie
  • 11,380
  • 19
  • 83
  • 138