Tengo 2 métodos para ti.
Este método cambia el tamaño de la imagen solo visualmente, no sus dimensiones reales en DOM, y el estado visual después del cambio de tamaño se centra en el medio del tamaño original.
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');
}
Nota de compatibilidad del navegador : las estadísticas de los navegadores se muestran en línea encss
.
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%;
}
Nota: img.normal
yimg.fake
es la misma imagen.
Nota de compatibilidad con el navegador: este método funcionará en todos los navegadores, porque todos los navegadores admiten lascss
propiedades utilizadas en el método.
El método funciona de esta manera:
#wrap
y #wrap img.fake
tener flujo
#wrap
tiene overflow: hidden
para que sus dimensiones sean idénticas a la imagen interior ( img.fake
)
img.fake
es el único elemento dentro #wrap
sin absolute
posicionar para que no rompa el segundo escalón
#img_wrap
tiene absolute
posicionamiento en el interior #wrap
y se extiende en tamaño a todo el elemento ( #wrap
)
- El resultado del cuarto paso es que
#img_wrap
tiene las mismas dimensiones que la imagen.
- Al establecer
width: 50%
en img.normal
, su tamaño es 50%
de #img_wrap
, y por lo tanto 50%
del tamaño de la imagen original.
width: <number>%
. ¡No creo que haya una forma de hacerlo!