Tôi có 2 phương pháp cho bạn.
Phương pháp này chỉ thay đổi kích thước hình ảnh trực quan chứ không phải là kích thước thực tế trong DOM và trạng thái hình ảnh sau khi thay đổi kích thước được căn giữa ở giữa kích thước ban đầu.
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');
}
Lưu ý hỗ trợ trình duyệt : thống kê trình duyệt hiển thị nội tuyến trongcss.
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%;
}
Lưu ý: img.normal vàimg.fakelà hình ảnh giống nhau.
Lưu ý hỗ trợ trình duyệt: Phương pháp này sẽ hoạt động trên tất cả các trình duyệt, vì tất cả các trình duyệt đều hỗ trợcsscác thuộc tính được sử dụng trong phương thức.
Phương pháp hoạt động theo cách này:
#wrapvà #wrap img.fakecó dòng chảy#wrapcó overflow: hiddenđể kích thước của nó là giống hệt nhau để hình ảnh bên trong ( img.fake)img.fakelà phần tử duy nhất bên trong #wrapkhông có absoluteđịnh vị để nó không phá vỡ bước thứ hai#img_wrapcó absoluteđịnh vị bên trong #wrapvà mở rộng kích thước cho toàn bộ phần tử ( #wrap)- Kết quả của bước thứ tư là
#img_wrapcó kích thước giống như hình ảnh.
- Bằng cách
width: 50%bật img.normal, kích thước của nó 50%bằng #img_wrap, và do đó 50%bằng kích thước hình ảnh gốc.
width: <number>%. Tôi không nghĩ rằng có một cách để làm điều đó!