2

これが私があなたに課した問題です。

手書きのJavascriptコードを使用してランダムな画像を配置するページがあります。前提は、画像がすべて異なるサイズであるということです。

ここで、画像が画面の大部分を占めるように（style = "width：95％;"）、または画像がそれ自体の最大サイズよりも大きくサイズ変更されないように画像を表示したいと思います。したがって、本質的に、画像は常に完全に表示されます（少なくとも水平方向に）。

私がやりたくないのは、画像の場所以外のものをハードコーディングすることです。だから私はどういうわけか動的に最大サイズをフェッチし、ページにそれらを認識させたいと思います。

私は探しているものを管理するためにJavascript（および提案によるJQuery）関数とCSSコードを見つけることを検討してきましたが、役に立ちませんでした。問題の一部は、私が信頼できる読みやすい情報源を見つけられず、学校でいくつかのことを学んだが、正直なところ、私が探しているものの適切な手がかりを持っていないことかもしれません。そして今、私は自分の選択肢を見て、私が求めることはできないように感じています。

しかし、私はここで問題を提起します。また、これまでに持っていたコードを貼り付けます。提案、変更、ヘルプは大歓迎です。わからないし、見つけられない。

<!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>

私がしていることのすべてがWeb標準に完全に一致しているわけではないことを理解していますが、ええと。それは私が何かをするためのより多くのテストページとして設計されました、私が少し自分でした以前のすべてのこと。でも今欲しいのは難しすぎるようです。そして、私はどこに行くべきかわかりません。

助けてくれてありがとう

4

1 に答える 1

0

height画像のとをキャプチャwidthして変数に割り当てる実用的な例を次に示します。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;
}
于 2012-09-08T03:09:29.650 に答える