纯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.    
  2. <html lang="zh-CN">

    3.    
  3. <head>

    4.    
  4. 	<meta charset="UTF-8">

    5.    
  5. 	<title>JavaScript实现图片等比缩放</title>

    6.    
  6. </head>

    7.    
  7. <body>

    8.    
  8. 	<script type="text/javascript">

    9.    
  9. 		function resize(element, maxWidth, maxHeight){

    10.    
  10. 			if(element.width > maxWidth || element.height > maxHeight){

    11.    
  11. 				if(element.width / element.height > maxWidth / maxHeight){

    12.    
  12. 					element.width = maxWidth;

    13.    
  13. 				}else{

    14.    
  14. 					element.height = maxHeight;

    15.    
  15. 				}

    16.    
  16. 			}

    17.    
  17. 		}

    18.    
  18. 	</script>

    19.    
  19. 	<img src="image-url.png" onload="resize(this, 100, 100);" />

    20.    
  20. </body>

    21.    
  21. </html>

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

  
       
  1. <!doctype html>

    2.    
  2. <html lang="zh-CN">

    3.    
  3. <head>

    4.    
  4. 	<meta charset="UTF-8">

    5.    
  5. 	<title>纯CSS无表达式实现图片等比缩放</title>

    6.    
  6. 	<style>

    7.    
  7. 		.box{

    8.    
  8. 			width: 300px;

    9.    
  9. 			height: 300px;

    10.    
  10. 			text-align: center;

    11.    
  11. 			border: 1px solid #ccc;

    12.    
  12. 		}

    13.    
  13. 		.box img{

    14.    
  14. 			max-width: 100%;

    15.    
  15. 			max-height: 100%;

    16.    
  16. 			width: auto;

    17.    
  17. 			height: auto;

    18.    
  18. 		}

    19.    
  19. 	</style>

    20.    
  20. </head>

    21.    
  21. <body>

    22.    
  22. 	<div class="box"><img src="image-url.png" alt=""></div>

    23.    
  23. </body>

    24.    
  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 查看评论.