收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 4026|回复: 4

[jquery] Jquery 控制显示的图片宽度和高度问题

[复制链接]
发表于 2014-2-24 13:12:42 | 显示全部楼层 |阅读模式
25体力

我的页面代码如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title>AAA</title>
  7. <meta name="keywords" content="Html5,CSS3" />
  8. <meta name="description" content="" />
  9. <link rel="stylesheet" href="Loading/css/main.css"/>
  10. <script type="text/javascript" src="Loading/js/jquery-1.8.3.min.js"></script>
  11. <script type="text/javascript" src="Loading/js/main.js"></script>
  12. </head>
  13. <body>

  14. <img id="img" src="Loading/images/bg01.jpg"/>

  15. <div class="main">
  16.     <div class="logo" id="logo"><img src="Loading/images/logo.png" alt="新疆麦盖提县刀郎歌舞团"></div>
  17.     <div class="main-con">
  18.         <a href="Ch/index.php" class="develop" id="develop" target="_blank">
  19.         <img src="Loading/images/cn.png" alt="进入汉文版"></a>
  20.         <a href="Uy/index.php" class="design" id="design" target="_blank">
  21.         <img src="Loading/images/uy.png" alt="进入维吾尔文版"></a>
  22.     </div>
  23.     <div class="bottom" id="bottom"><a href="#" target="_blank">
  24.     <img src="Loading/images/bottom.png" alt="Powered By sic"></a></div>
  25. </div>
  26. <div style="display:none;">
  27.    统计代码
  28. </div>
  29. </body>
  30. </html>
复制代码
我想让 <img id="img" src="Loading/images/bg01.jpg"/> 按屏幕分辨率改变高度和宽度。

Jquery 代码如下:
  1. $(function(){
  2.     $(window).resize(function(e) {
  3.         refreshSize();
  4.     });
  5.     $("#logo").stop().delay(800).fadeIn(300);
  6.     $("#bottom").stop().delay(1000).fadeIn(300);
  7.     $("#develop").stop().delay().fadeIn(500);
  8.     $("#design").stop().delay(500).fadeIn(500);
  9. });

  10. function refreshSize(){
  11.     $("#img").width($(window).width());
  12.     $("#img").height($(window).height());
  13. }
复制代码
页面运行后,用火狐查看元素代码发现 正确添加了高度和宽度参数,但是实际显示的图片还是原来的大尺寸( bg01.jpg 为 1920 x 1280 )。

这是页面运行后的代码:

<img id="img" src="Loading/images/bg01.jpg" style="width: 1600px; height: 458px;"></img>

怎么让图片高度和宽度同窗口大小一起改变,并正常显示呢?

最佳答案

查看完整内容

[html] demo body{ margin:0; padding:0} function refreshSize(){ $('#img').css({ width: $(window).width(), height: $(window).height() }); } $(document).ready(function(e) { refreshSize(); $(window).resize(function(e) { refreshSize(); }); }); [/html]
发表于 2014-2-24 13:12:43 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复

使用道具 举报

发表于 2014-2-24 13:18:28 | 显示全部楼层
function refreshSize(){
    $("#img").css('width',$(window).width()+'px');
    $("#img").css('height',($(window).height()+'px');
}
回复

使用道具 举报

 楼主| 发表于 2014-2-24 14:00:56 | 显示全部楼层
shang83211 发表于 2014-2-24 13:18
function refreshSize(){
    $("#img").css('width',$(window).width()+'px');
    $("#img").css('heig ...

这个加上去以后页面的效果没有了,图片的属性没有加上去啊
回复

使用道具 举报

 楼主| 发表于 2014-2-24 15:57:32 | 显示全部楼层
问题解决了,感谢    pxh0829
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-25 12:38 , Processed in 0.109101 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表