CSS图片剪切

html-css011

CSS图片剪切,第1张

在网站设计中，有时候会遇到对一张图片做多处使用，而每处显示的尺寸又不一定都一样，在传统作法中，需要根据不同尺寸

设计不同的图片。不过利用css，能够很好解决这个问题。

一、直接设置图片的width，height，或者直接改变图片的长宽比例

虽然简单方便，但是会引起图像显示效果问题。因为浏览器不能像ps那样对图像以相对尺寸进行缩放运算，实际显示虽然简单方便，但是会引起图像显示效果问题。因为浏览器不能像ps那样对图像以相对尺寸进行缩放运算，实际显示时图像会出现像素位移的状况。

二、使用clip剪切

CSS对许多对象提供专门用于对象剪切的样式属性——clip，可用clip属性来处理对象最终的显示内容。

clip 设置对象的可视区域。只对绝对定位的对象有效，应用此属性时，对象必须使用position：absolute

可用值：auto， rect（number，number，number，number）

使用clip属性进行对象剪切时，必须给的4个数值。使用方法如下

clip：rect（number1，number2，number3，number4）；

number1~number4分别代表上、右、下、左4个边，相对与左上角坐标（0,0）的偏移值。

（这点与margin四个数值代表边的顺序相同，不同的margin的四个值都是相对于自身内容的四边的偏移）

三、使用div强制剪切

使用overflow：hidden；的对象将强制不显示对象中超过对象范围的部分内容

页面实现大头贴功能，相框固定，照片可更换，类似下图。

其实我们可以拆分一下：相框.png是一张图片，金泰熙小姐姐照片.jpg是另一张图片，只要把相框.png叠在金泰熙小姐姐照片.jpg图片前面，那么就实现啦！

先上HTML结构：

相框为固定宽高，假设宽为300px，高为400px。

CSS样式如下：

那么问题来了，photo怎么居中？

试过的不成功解法：

1、把photo设为绝对定位，left:-50%，再设margin-left为负值。由于photo宽度不确定，因此margin-left具体值不确定。

2、宽度设为300px，图片变形。

3、把photo设为绝对定位，margin:auto,left:0,right:0。当box容器宽度小于photo时，该方法失效。

以上方法均无法实现居中后，想到如下可行办法：

HTML结构：

CSS样式：

给photo外加一个div容器photobox，给photobox设定一个足够宽的宽度，再将photobox相对box居中，然后再用text-align:center让photo相对于photobox居中。

photobox容器left值=（photobox容器宽 - box容器宽）/2