Làm thế nào để phóng to div trên di chuột theo phần trăm

Question

tôi muốn rằng zoom-in sẽ ảnh hưởng đến chỉ img bên trong div và sẽ không thay đổi kích thước tất cả các div quy mô

đây là liên kết fiddle: http://jsfiddle.net/4tHWg/1/

mã ví dụ:

.box { 
    float: left; 
    position: relative; 
    width: 14.285714286%; 



} 

.boxInner img { 
    width: 100%; 
    display: block; 
    -webkit-filter: grayscale(00%); 
    -moz-filter: grayscale(00%); 
    -o-filter: grayscale(00%); 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
     transition: all 1s ease; 

} 

.boxInner img:hover { 
    width: 200%; 
} 

Answer 1

Bạn có thể sử dụng css biến:

http://jsfiddle.net/4tHWg/3/

.boxInner img:hover {  
    -webkit-transform: scale(1.4); 
    -moz-transform: scale(1.4); 
    -ms-transform: scale(1.4); 
    -o-transform: scale(1.4); 
    transform: scale(1.4);  
} 

1,4 bằng 1,4 lần kích thước ban đầu.

Answer 2

Thêm vào câu trả lời của hugo, bạn nên thêm phần này vào phần tử gốc của bạn.

.boxInner { 
    overflow: hidden; 
} 

.boxInner img:hover {  
    -webkit-transform: scale(1.4); 
    -moz-transform: scale(1.4); 
    -ms-transform: scale(1.4); 
    -o-transform: scale(1.4); 
    transform: scale(1.4);  
} 

Bằng cách này, div sẽ không thay đổi kích thước cùng với hình ảnh con.