首页 > 教程 > 关键词  > Web标准 CSS 缩小图片最新资讯  > 正文

符合Web标准,CSS同比例缩小图片

2007-04-20 10:54 · 稿源:PConline

  当然,生成缩略图这个工作如果交给程序来完成,效果会好很多,但是有时出于某种因素,例如服务器不支持GD之类的,难免就要请CSS代劳。


  把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可。


  对于IE 6.0及以下版本,以上两条CSS属性均不会被理会。之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件。例如:

以下为引用的内容:
Example Source Code

  <imgsrc="..."alt="..."onload="resizeImage(this)"/>
  <script type="text/javascript">
  functionresizeImage(obj){
  obj.width=obj.width>50&&obj.width>obj.height?50:auto;
  obj.height=obj.height>50?50:auto;
  }
  </script>

  这固然能解决问题,但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善,我们迟早会把图片上的onload事件统统去除。该是Expression的Show Time了,既然IE支持通过Expression在CSS中放置一些脚本,而这段脚本又只是提供给IE 6.0及以下版本使用,那么把它写到Expression中再合适不过。


  最终,把一副大图片按比例缩小到50px*50px以内,可以参照以下这段CSS:

以下为引用的内容:
Example Source Code

  .thumbImage{
  max-width:50px;
  max-height:50px;
  }
  *html.thumbImage{
  width:expression(this.width>50&&this.width>this.height?50:auto);
  height:expresion(this.height>50?50:auto);
  }

  至于图片是如何保持其高宽比例的,这张图片可以解释:

举报

  • 相关推荐
  • 微信iOS又有新功能 聊天终于能发实况图片了

    日前,微信iOS版又迎来新功能与好友聊天支持发送实况照片,目前为灰度测试阶段。 据了解,使用该功能需要将微信iOS更新至8.0.61版本及以上,默认实况为关闭状态,发送照片时点击进入大图预览页面可手动开启单个照片的实况开关。

  • 微信朋友圈评论区能发表情包和图片:缓存可清理 不会太占用存储空间

    上个月,微信开始灰度测试朋友圈评论区带图功能,支持用户用表情包和图片进行评论。 有网友表示,微信现在评论可以带图了,我想知道评论区的图片会不会缓存下来占用我的手机空间。 对此,微信员工客村小蒋表示,在讨论微信占空间时,有两种需要区分的数据:可再生数据和非可再生数据。

  • LiblibAI 重磅发布「星流 Agent」:中文语义 + 图片视频3D全能生成,中国最强设计 Agent

    LiblibAI推出Lovart中文版"星流Agent",这是一款专为中国市场深度优化的AI设计工具。该产品在保留Lovart全球版"生成-编辑-排版-交付"全链路能力基础上,针对中文语义、国风审美和本土使用场景进行了全面重构。星流Agent支持从创意构思到设计交付的全流程自动化,可处理平面设计、视频生成和3D建模等跨模态创作,内置符合中国文化的视觉风格库。该产品的推出标�

  • AI日报:阿里通义开源音频生成模型ThinkSound;谷歌Veo3支态图片生成视频;昆仑万维发布 Skywork-R1V 3.0

    【AI日报】今日AI领域重要动态:1)阿里开源支持链式推理的音频生成模型ThinkSound,实现高保真空间音频生成;2)谷歌Veo3升级,支持静态图片生成生动视频;3)Hugging Face发布30亿参数小模型SmolLM3,性能优于Llama-3.2-3B;4)阿里开源网络智能体WebSailor,展现强大推理和检索能力;5)Moonvalley发布原生1080P视频生成模型Marey Realism v1.5;6)Vidu Q1支持最多七张参考图像生成一致性视频;7)苹果�

  • AI日报:腾讯元宝升级一句话搜索图片视频;微信支付MCP上线;谷歌在全球推出 Veo 3

    【AI日报】今日AI领域重要动态:1)腾讯元宝升级,支持一句话搜索呈现图文视频;2)微信支付MCP上线,AI与支付结合开启商业新纪元;3)谷歌Veo3视频生成模型向Pro/Ultra会员开放,新增"照片生成视频"功能;4)开源DeepSeek R1增强版推理效率提升200%;5)美图WHEE推出"一句话修图"功能;6)芯片公司Ambiq申请美国IPO,受益生成式AI需求;7)昆仑万维开源奖励模型Skywork-Reward-V2;8)Kyutai发布超低延迟开源语音合成技术;9)Figma拟以200亿美元估值登陆纽交所;10)字节跳动开源Trae-Agent智能开发工具。

  • 中美合拍!电影《猫和老鼠:星盘奇缘》预告片发布 8月9日上映

    电影《猫和老鼠:星盘奇缘》今天发布了全新预告,展现了一些全新的剧情故事。 从内容来看,电影用十二时辰展现了多个故事,每个时辰会穿越一次,融入了很多中国元素。 这部电影也确实是中美合拍,由张钢(《魁拔3》《狠西游》)执导,中影和华纳合作开发。 根据国家电影局官网备案显示,剧情梗概如下: 迷恋东方文化的老鼠Jerry和博物馆保安猫Tom在打斗时带着星斗�

  • 腾讯云GooseFS团队与厦门大学合作成果 AC-Cache入选 PPOPP

    腾讯云研发的AC-Cache内存缓存系统入选并行编程顶会PPOPP2025。该系统针对小型对象存储场景,通过感知访问关联性的创新设计,成功解决负载不均衡问题。实测显示,AC-Cache可降低80.2%尾部延迟,提升5倍以上访问吞吐量。该技术已开源并应用于腾讯云GooseFS产品,在手机制造、自动驾驶等领域取得显著成效:某手机厂商模型分发速度达300MB/s,带宽提升10倍;某车企训练效率提高30%,数据命中率超90%。AC-Cache的突破将助力企业突破存储性能瓶颈。

  • 微云全息(NASDAQ: HOLO)引领加密货币预测新纪元:HNFCS技术揭秘

    微云全息(NASDAQ:HOLO)开发了混合神经模糊控制系统(HNFCS),结合神经网络学习能力和模糊逻辑灵活性,能有效预测比特币等加密货币价格波动。该系统通过处理海量市场数据,动态调整预测模型,克服了传统方法在样本外预测和超时预测准确性方面的局限。HNFCS技术优势在于其自适应性和实时性,可扩展应用于多种金融场景,为投资者提供精准决策支持,有望成为加密货币市场的重要分析工具。

  • 锐捷网络重磅发布RG-UNC CS网络数字化平台:四大核心能力重塑企业网络管理新范式

    锐捷发布RG-UNC网络数字化平台CS系列产品,通过全网统一融合管理、组网编排及自动化部署、便捷准入与访问控制、全链业务保障与可视四大核心能力,重新定义企业网络管理标准。该平台基于微服务架构打造,支持服务组件灵活扩展与故障自愈,兼容第三方系统,满足不同规模客户需求。CS系列面向大中型园区,支持"管、控、析、维、营"全生命周期管理;AS系列作为轻量化衍生品,适合中小型园区。产品实现分钟级上线、策略随行、业务一键逃生等功能,显著提升网络部署效率与运维体验。

  • 高决策行业,找到了最后一片种草蓝海

    35岁的互联网公司中层苏越最近萌生了换车的想法。工作间歇之余,他打开今日头条,认真翻阅起了自己关注的汽车博主@韩路聊车 发布的内容。在一条条图文、视频的专业测评和各项核心数据的细致讲解,以及评论区中车主的真实反馈和热情互动中,他的思路逐渐清晰,并最终做出决策,完成了这桩30万+的购车事宜。