J'ai 2 méthodes pour vous.
Cette méthode de redimensionnement de l'image uniquement visuel non dimensions réelles dans les DOM, et de l'état visuel après redimensionnement centré au milieu de la taille d'origine.
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');
}
Prise en charge du navigateur remarque: les navigateurs les statistiques ont montré inline en 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%;
}
Remarque: img.normal et img.fake est la même image.
Prise en charge du navigateur remarque: Cette méthode fonctionne dans tous les navigateurs, car tous les navigateurs prennent en charge l' css propriétés utilisées dans la méthode.
La méthode fonctionne de cette manière:
- '#wrap' et '#wrap img.faux " ont
flow
-
#wrap a overflow: hidden pour configurer #wrap dimensions à l'identique à l'intérieur de l'image (img.fake)
-
img.fake est le seul élément sans absolute ou fix position en #wrap pour ne pas casser le résultat de la deuxième étape.
-
#img_wrap a absolute position à l'intérieur d' #wrap et agrandi à l'ensemble de l'élément (#wrap)
- Résultat de la quatrième étape est l'
#wrap_img les mêmes dimensions que l'image.
- À l'aide de
responsive images méthode width: 50%; de img.normal et maintenant vous avez votre résultat.
