纯CSS无表达式实现图片等比缩放(支持IE7及以上)

标签: css 表达式 图片 | 发表时间:2013-02-27 23:29 | 作者:蓝飞
出处:http://www.clanfei.com/

在制作网页的时候,常常会遇到一种情况,我们需要把一些未知尺寸的图片放在一个固定宽高的容器中,这时候我们需要考虑这样的问题:

  1. 只给图片设置宽度或高度的其中一项可以实现图片等比缩放,但图片可能超出容器大小。
  2. 给图片设置固定的宽高可能导致图片变形。

有些人可能会简单地用JavaScript解决:

  
  1. <img src="image-url.png" onload="if(this.width > 100){this.width = 100;}if(this.height > 100){this.height = 100;}" />

但在这种写法在图片长宽差距较大时还是会出现图片变形的情况,优化了缩放算法的代码如下:

  
  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>JavaScript实现图片等比缩放</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. function resize(element, maxWidth, maxHeight){
  10. if(element.width > maxWidth || element.height > maxHeight){
  11. if(element.width / element.height > maxWidth / maxHeight){
  12. element.width = maxWidth;
  13. }else{
  14. element.height = maxHeight;
  15. }
  16. }
  17. }
  18. </script>
  19. <img src="image-url.png" onload="resize(this, 100, 100);" />
  20. </body>
  21. </html>

而在不考虑IE6的情况下,可以直接使用CSS来实现,而且不需要使用低性能的CSS表达式:

  
  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>纯CSS无表达式实现图片等比缩放</title>
  6. <style>
  7. .box{
  8. width: 300px;
  9. height: 300px;
  10. text-align: center;
  11. border: 1px solid #ccc;
  12. }
  13. .box img{
  14. max-width: 100%;
  15. max-height: 100%;
  16. width: auto;
  17. height: auto;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div class="box"><img src="image-url.png" alt=""></div>
  23. </body>
  24. </html>

相关 [css 表达式 图片] 推荐:

纯CSS无表达式实现图片等比缩放(支持IE7及以上)

- - 蓝飞技术部落格
在制作网页的时候,常常会遇到一种情况,我们需要把一些未知尺寸的图片放在一个固定宽高的容器中,这时候我们需要考虑这样的问题:. 只给图片设置宽度或高度的其中一项可以实现图片等比缩放,但图片可能超出容器大小. 给图片设置固定的宽高可能导致图片变形. 有些人可能会简单地用JavaScript解决:. 但在这种写法在图片长宽差距较大时还是会出现图片变形的情况,优化了缩放算法的代码如下:.

CSS 与 HTML5 响应式图片

- - TaoBaoUED
 随着  Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高. 如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状. 响应式图片是指: 用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.

CSS页面重构“鑫三无准则”之“无图片”准则

- jessie - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1652. “鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过. 这是自己在页面重构的经验中总结出来的一套约束自己CSS的准则,即“无宽度”、“无图片”和“无浮动”,目的是使CSS布局模块化以及增强可扩展性.

用javascript预加载图片、css、js的方法研究

- - 博客园_Ruby's Louvre
预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片、css、js这些静态文件可以被缓存),如果用户访问的页面里面的 css、js、图片被预加载了,用户打开页面的速度会快很多,提升用户体验. 在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户. 不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果.

小tip: 使用CSS将图片转换成黑白的

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2547. //zxx: 最近很积极地折腾手机页面的些东西,加上其他一些人生重要的事,所以木有更新. 可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的( filter: gray;),不过,当时,其他浏览器是无解的.

网站性能优化之CSS无图片技术

- - 微博UDC
在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果的技术. 首先我们通过yslow的statistics查看新浪微博最新版首页的文件,得到Stylesheet File(CSS文件)大小为206.8K, CSS Image大小为623.8K.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.