javascript - 使用javascripts的availHeight和availWidth更改图像大小

标签 javascript jquery image attributes resize

我是这个论坛的新人,实际上我刚刚登录。

我有一个索引文件,其中只包含一个标签。

这是我的代码

<小时/>
<!DOCTYPE HTML>
<html>
<head>

<link rel="stylesheet" href="css/style.css" type="text/css"/>


<script>

h=screen.availHeight;
w=screen.availWidth;

</script>
</head>
<body>
<div id="container" align="center">
    <img id="image" src="images/last.png" alt="starting"                               onmouseover="this.src='images/first.png';" 
    onmouseout="this.src='images/last.png';"  usemap="#map"/>  

    <map name="map">
        <area shape="rect" coords="13,250,455,450" alt="shops" href="">
        <area shape="rect" coords="675,310,1080,390" alt="eshop" href="/opencart/upload">
    </map>
</div>  

<小时/>

我想要做的是根据访问者的屏幕尺寸更改图像的尺寸。 我知道availHeight和availWidth返回浏览器使用的屏幕的高度和宽度。我想将返回值保存在变量 h 和 w 中,然后将 html 标记内的这些变量解析为 height=h 和 width=w

你能帮我构建我的函数并使其工作吗?

任何帮助将不胜感激。

最佳答案

您可以在 JavaScript 中指定宽度和高度。将脚本放在结束 body 标记之前或放入 document.ready .

h=screen.availHeight;
w=screen.availWidth;
$(document).ready(function(){
  $img = $('#image');
  $img.width(w);
   $img.height(h);
});

或者

h=screen.availHeight;
w=screen.availWidth;
$(document).ready(function(){
  img = document.getElementById('image');
  img.style.width = w;
  img.style.height = h;
});

关于javascript - 使用javascripts的availHeight和availWidth更改图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14568403/

相关文章:

javascript - Angular JS 中的递归 promise

从 postmaster@domain.co.uk 收到的 PHP 电子邮件表格

plugins - XVal 中的 JScript 错误,有人见过这个错误吗?

javascript - jQuery:FireFox 3.0.1 中的宽度和高度未更改

javascript - 根据容器的高度和宽度计算图像的最佳尺寸

c++ - 将二维整数数组(与图像相关)调整为特定大小?

javascript - 这就是为什么要使用 Blob 设置 <img> 内容,而不使用 FileReader 或 URL.createObjectURL

javascript - "Cross origin requests are only supported for HTTP."加载本地文件时出错

javascript - 如何在图像完全加载之前显示等待 gif

javascript - Jquery html 在最后插入