I have 2 methods for you.
This method resize image only visual not it actual dimensions in DOM, and visual state after resize centered in middle of original size.
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');
}?
Browser support note: browsers statistics showed inline in css.
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.
The method works in this way:
#wrap and #wrap img.fake have flow#wrap has overflow: hidden so that its dimensions are identical to inner image (img.fake)img.fake is the only element inside #wrap without absolute positioning so that it doesn't break the second step#img_wrap has absolute positioning inside #wrap and extends in size to the entire element (#wrap)- The result of the fourth step is that
#img_wrap has the same dimensions as the image.
- By setting
width: 50% on img.normal, its size is 50% of #img_wrap, and therefore 50% of the original image size.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
