CSS图像本身的尺寸调整百分比？

我有两种方法给你。

方法1. jsFiddle上的演示

此方法仅在视觉上调整图像大小，而不在DOM中调整其实际尺寸，并且调整大小后的视觉状态以原始大小的中间为中心。

HTML：

<img  src="example.png" />

CSS：

img {  -webkit-transform: scale(0.5);      -moz-transform: scale(0.5);       -ms-transform: scale(0.5);        -o-transform: scale(0.5);           transform: scale(0.5);    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');}​

浏览器支持说明： 浏览器的统计信息以内联显示

css

方法2. jsFiddle上的演示

HTML：

<div id="wrap">    <img  src="example.png" />    <div id="img_wrap">        <img  src="example.png" />    </div></div>​

CSS：

#wrap {    overflow: hidden;    position: relative;    float: left;}#wrap img.fake {    float: left;    visibility: hidden;    width: auto;}#img_wrap {    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;}#img_wrap img.normal {    width: 50%;}​

注意：

img.normal

img.fake

css

该方法以这种方式工作：

1. #wrap

   并

   #wrap img.fake

   有流量

2. #wrap

   具有

   overflow: hidden

   使得它的尺寸是相同的内图像（

   img.fake

   ）

3. img.fake

   是内部唯一

   #wrap

   没有

   absolute

   定位的元素，因此不会破坏第二步

4. #img_wrap

   在

   absolute

   内部定位

   #wrap

   并在尺寸上扩展到整个元素（

   #wrap

   ）
5. 第四步的结果是

   #img_wrap

   具有与图像相同的尺寸。
6. 通过设置

   width: 50%

   上

   img.normal

   ，它的大小是

   50%

   的

   #img_wrap

   ，因此

   50%

   原始图像的尺寸。