html 设置图片显示比例,html – CSS图像调整自身的百分比？

我有2个方法给你。

此方法调整大小的图像只有视觉，而不是DOM中的实际尺寸，调整大小后的视觉状态居中在原始大小的中间。

html：

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');

}​

浏览器支持注意：浏览器统计信息在css中显示为inline。

html：

​

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属性。

该方法以这种方式工作：

>’#wrap’和’#wrap img.fake’有流> #wrap has overflow：hidden to set #wrap dimensions samely within inner image(img.fake)> img.fake是只有一个元素没有绝对或固定位置在#wrap不打破第二步的结果。> #img_wrap在#wrap中有绝对位置，并在大小上扩展到整个元素(#wrap)>第四步的结果是#wrap_img与图像相同的尺寸。>使用响应图像方法设置宽度：50％;的img.normal和现在你得到你的结果。