Html CSS图像调整自身的百分比

我有两种方法.

Method 1. demo on jsFiddle

这种方法只调整图像的视觉尺寸，而不是DOM中的实际尺寸，调整后的视觉状态集中在原始尺寸的中间.

html:个

<img class="fake" src="example.png" />

css:个个

img {
  -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5); /* FF3.5+ */
      -ms-transform: scale(0.5); /* IE9 */
       -o-transform: scale(0.5); /* Opera 10.5+ */
          transform: scale(0.5);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}​

101个浏览器的统计数据显示，css个浏览器中有css个是内联的.

Method 2. demo on jsFiddle

html:个

<div id="wrap">
    <img class="fake" src="example.png" />
    <div id="img_wrap">
        <img class="normal" 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%;
}​

Note: img.normal and img.fake is the same image.
Browser support note: This method will work in all browsers, because all browsers support css properties used in method.

该方法是这样工作的:

1. #wrap和#wrap img.fake有流量
2. #wrap具有overflow: hidden，使得其尺寸与内部图像(img.fake)相同
3. img.fake是#wrap内唯一没有absolute定位的元素，因此它不会中断第二步
4. #img_wrap在#wrap内具有absolute个定位，并且在尺寸上延伸到整个元件(#wrap)
5. 第四步的结果是#img_wrap与图像的尺寸相同.
6. 通过将width: 50%设置为img.normal，其大小为#img_wrap的50%，因此是原始图像大小的50%.