0
私は何か比較的簡単です。私は、ウェブページの左側に表示する必要がある画像を持っています&高さは、ユーザーの画面サイズにする必要があります。画面の高さにイメージをリサイズしますが、比率を維持します
私は、ユーザーの画面の高さに画像のサイズを変更するためにjavascriptを使用しています。しかし、それは全くサイズ変更されません。関数は実行されますが、イメージのサイズは変わりません。
ユーザーの画面の高さに画像のサイズを変更する方法がありますか？（幅が比例するように）パースペクティブを維持するには&ですか？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kamalei - Home Page</title>
<style type="text/css">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
body { text-align: center; background-color: RGB(255, 255, 255); margin: 20px; }
#outerContainer { background-color: #DCFF9A; width: 100%; height: 100%; }
#midContainer { width: 100%; height: 100%; }
#innerContainer { min-width: 1200px; }
-->
</style>
<script type="text/javascript">
<!--
function getBrowserSize()
{
var res = {"width": 630, "height": 460};
if (document.body)
{
if (document.body.offsetWidth) res["width"] = document.body.offsetWidth;
if (document.body.offsetHeight) res["height"] = document.body.offsetHeight;
}
alert("A: "+res["height"]);
if (window.innerWidth) res["width"] = window.innerWidth;
if (window.innerHeight) res["height"] = window.innerHeight;
alert("B: "+res["height"]);
return res;
}
function getScreenSize()
{
var res = {"width": 630, "height": 460};
if (parseInt(navigator.appVersion)>3)
{
res["width"] = screen.width;
res["height"] = screen.height;
}
else if (navigator.appName == "Netscape" && parseInt(navigator.appVersion)==3 && navigator.javaEnabled())
{
var jToolkit = java.awt.Toolkit.getDefaultToolkit();
var jScreenSize = jToolkit.getScreenSize();
res["width"] = jScreenSize.width;
res["height"] = jScreenSize.height;
}
return res;
}
-->
</script>
</head>
<body>
<div id="outerContainer">
<div id="midContainer">
<img id="kamaleiText" src="images/kamaleiText.png" alt="" />
<div id="innerContainer">
<p>abcd</p>
</div>
</div>
</div>
<!-- Run page load scripts -->
<script type="text/javascript">
<!--
//window.onresize = setBackgroundImgWidth;
alert("C: "+document.getElementById("kamaleiText").offsetBottom);
document.getElementById("kamaleiText").offsetBottom = getBrowserSize()["height"] + "px";
alert("D: "+document.getElementById("kamaleiText").offsetBottom);
// after this the pictures height hasn't changed, its the same size when it should be the height of the users screen.
-->
</script>
</body>
</html>
返信ありがとうございます。しかし、インラインCSSスタイルを設定しても画像の高さは変わりません。これを修正するにはどうすればよいですか？ – Mack
@Mack、あなたのjavascriptを削除し、@ dtbarneのスタイルをスタイルシートに実装してみてください。例えば。 #midContainer img {height：100％;} – Dan
downvoteの説明はありますか？ – dtbarne