纯CSS无表达式实现未知尺寸图片等比缩放(支持IE7及以上)
2013-10-17 17:25
453 查看
在***网页的时候,常常会遇到一种情况,我们需要把一些未知尺寸的图片放在一个固定宽高的容器中,这时候我们需要考虑这样的问题:
只给图片设置宽度或高度的其中一项可以实现图片等比缩放,但图片可能超出容器大小。
给图片设置固定的宽高可能导致图片变形。
有些人可能会简单地用JavaScript解决:
但在这种写法在图片长宽差距较大时还是会出现图片变形的情况,优化了缩放算法的代码如下:
而在不考虑IE6的情况下,可以直接使用CSS来实现,而且不需要使用低性能的CSS表达式:
只给图片设置宽度或高度的其中一项可以实现图片等比缩放,但图片可能超出容器大小。
给图片设置固定的宽高可能导致图片变形。
有些人可能会简单地用JavaScript解决:
<img src="image-url.png" onload="if(this.width > 100){this.width = 100;}if(this.height > 100){this.height = 100;}" />
但在这种写法在图片长宽差距较大时还是会出现图片变形的情况,优化了缩放算法的代码如下:
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>JavaScript实现图片等比缩放</title> </head> <body> <script type="text/javascript"> function resize(element, maxWidth, maxHeight){ if(element.width > maxWidth || element.height > maxHeight){ if(element.width / element.height > maxWidth / maxHeight){ element.width = maxWidth; }else{ element.height = maxHeight; } } } </script> <img src="image-url.png" onload="resize(this, 100, 100);" /> </body> </html>
而在不考虑IE6的情况下,可以直接使用CSS来实现,而且不需要使用低性能的CSS表达式:
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>纯CSS无表达式实现图片等比缩放</title> <style> .box{ width: 300px; height: 300px; text-align: center; border: 1px solid #ccc; } .box img{ max-width: 100%; max-height: 100%; width: auto; height: auto; } </style> </head> <body> <div class="box"><img src="image-url.png" alt=""></div> </body> </html>
相关文章推荐
- 纯CSS无表达式实现图片等比缩放(支持IE7及以上)
- 纯CSS无表达式实现图片等比缩放(转载)
- 纯css实现未知尺寸图片在DIV中垂直水平居中(超简单)
- CSS中如何实现未知尺寸图片垂直居中
- CSS实现图片超过限定尺寸自动缩放兼容IE和Firefox
- 使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。
- 使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法?
- CSS 实现背景图尺寸不随浏览器缩放而变化
- CSS实现避免页面布局被大尺寸图片和长字符串破坏
- 模仿微信朋友圈 仿微信js-sdk wx.previewImage javascript实现,支持图片预览,滑动切换,双指缩放,图片缓存 h5 html5 js
- 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)
- CSS-expression实现图片缩放效果,兼容IE、FF
- 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)
- CSS未知尺寸的图片在容器中垂直居中的方法
- android 利用ImagevView加载本地图片并实现等比缩放
- CSS实现图片快速等比例缩放,效果佳
- jquery 实现网页端图片等比缩放
- 基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
- JAVA实现图片上传自定义等比尺寸