CSS 截取图片只显示部分图片

在页面中需要在某个位置显示固定长宽的正方形图片,图片中有接近正方形比例但不是正方形,用PHP生成裁剪后的缩略图显然不合适,经过研究发现用CSS可以完美切割图片,经过测试Chrome,FF,IE6-9没问题。css有一个clip属性可以剪切对象,对象position必须为absolute。两张图分别为裁剪前和裁剪后的效果。


这个只是高度大于宽度的情况,如果这一批图片中还有一些宽度大于高度裁剪起来就会有些麻烦,不过经过试验已经完美解决,原理很简单,通过js在图片刚刚开始加载的时刻可以获取其宽度和高度,然后用js决定限制图片的高度还是宽度。如何在图片开始加载时获取大小可以在这里找到。

<div><a href="{$v->url}"><img width="100" title="{$v->name}" alt="{$v->name}" src="{$v->icon.small}"/></a></div>
<script type="text/javascript">
$(function(){
	$('div.icon img').each(function(){
		var $this=$(this);
		imgReady($this.attr('src'),function(){
			if(this.width>this.height){
				$this.attr('height','100');
				$this.removeAttr('width');
			}
		});
	});
});
</script>

css2.0手册中clip的解释

语法:
clip : auto | rect ( number number number number )
取值:
auto :  默认值。对象无剪切
rect ( number number number number ) :  依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用 auto 替换,即此边不剪切
说明:
检索或设置对象的可视区域。可视区域外的部分是透明的。
此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ,此属性方可使用。
自IE5开始,此属性在MAC平台上可用。
对应的脚本特性为 clip 。
示例:
div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); }
div { position:absolute; width:60px; height:60px; clip:rect(1cm auto 50px 10cm); }

CSS 截取图片只显示部分图片》上有4条评论

发表评论

电子邮件地址不会被公开。

CAPTCHA

*