У мене є 2 методи для вас.
Цей метод змінює розмір зображення лише візуального, а не його фактичних розмірів у 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');
}
Примітка щодо підтримки веб-переглядача : статистика веб-переглядачів відображається в рядку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%;
}
Примітка: img.normal іimg.fakeце те саме зображення.
Примітка щодо підтримки веб-переглядача: Цей метод працює у всіх браузерах, оскільки всі браузери підтримуютьcssвластивості, які використовуються в методі.
Метод працює таким чином:
#wrapі #wrap img.fakeмають потік#wrapмає overflow: hiddenтак, щоб його розміри були ідентичними внутрішнім зображенням ( img.fake)img.fakeє єдиним елементом всередині #wrapбез absoluteпозиціонування, щоб не порушити другий крок#img_wrapмає absoluteпозиціонування всередині #wrapі розмір поширюється на весь елемент ( #wrap)- Результатом четвертого кроку є те, що
#img_wrapмає ті ж розміри, що і зображення.
- Встановивши
width: 50%на img.normalїї розмір 50%з #img_wrap, і , отже , 50%від розміру початкового зображення.
width: <number>%. Я не думаю, що існує спосіб це зробити!