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

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

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

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

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

搜索
查看: 4389|回复: 8

在一个盒子里(div)怎么控制图片大小?

[复制链接]
发表于 2008-6-15 15:14:12 | 显示全部楼层 |阅读模式
目的: 控制图片大小, 大于某1固定大小时,自动变为该大小,并且生成链接,通过链接查看原图;
如: 在<DIV ID="CNT">CONTENT</DIV>里,里面有图片,也有文字,,如果里面的图片超过300px(宽),则自动变为300px宽度,并且生成图片链接, 点击 可以直接查看该 图 实际大小;

注: 只是控制 某一盒子里的, 不是整个网页!

请问用JS可以实现吗? 谢谢!
西部数码云主机全国3强45元起!
发表于 2008-6-15 17:10:23 | 显示全部楼层
JS可以实现,不用谢!
回复 支持 反对

使用道具 举报

发表于 2008-6-15 17:26:57 | 显示全部楼层
直接设置高和宽不行吗?
回复 支持 反对

使用道具 举报

发表于 2008-6-15 17:37:46 | 显示全部楼层
直接设置宽度最好了
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-6-16 09:29:00 | 显示全部楼层
无语...

我这个是 里面 的图片 是不固定数量, 也有可能没有图片, 如果我知道 里面 有 图片,并且知道他就是这个地方 ,,,那当然简单.
回复 支持 反对

使用道具 举报

发表于 2008-6-16 10:55:45 | 显示全部楼层

  1. 1.CSS
  2. <style>
  3. #CNT img {max-width: 300px} /* IE7+ */
  4. </style>

  5. 2.JS
  6. <script>
  7. function resizeImg(obj, maxw) {
  8.         var obj = document.getElementById(obj);
  9.         var imgs = obj.getElementsByTagName('img');
  10.         var imgCount = imgs.length;
  11.         if(imgCount==0) return;
  12.         for(var i=0; i<imgCount; i++) {
  13.                 if(imgs[i].width>maxw) {
  14.                         var oldw = imgs[i].width;
  15.                         var oldh = imgs[i].height;
  16.                         imgs[i].style.width = maxw +'px';
  17.                         imgs[i].style.height = (maxw/oldw*oldh) +'px';
  18.                 }
  19.         }
  20. }

  21. window.onload = function() {resizeImg('CNT', 300);}
  22. }
  23. </script>
复制代码
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-6-16 13:45:51 | 显示全部楼层
en,非常感谢,,,实现了...大小控制,,,

我想实现 规定超过大小的 就自动有个 链接 点击 查看原图...

该写在什么地方?谢谢
回复 支持 反对

使用道具 举报

发表于 2008-6-16 13:50:18 | 显示全部楼层
var oldh = imgs[i].height;
下接.
imgs[i].onclick=function(){window.open(imgs[i].src, '', '');};
回复 支持 反对

使用道具 举报

发表于 2008-6-16 14:05:09 | 显示全部楼层

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

回复 支持 反对

使用道具 举报

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

本版积分规则


QQ|小黑屋|Archiver|手机版|blueidea.com ( 京ICP备05002321号  

GMT+8, 2014-4-23 18:48 , Processed in 0.138121 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3

© 2001-2013 Comsenz Inc.

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