Sử dụng chuyển đổi khi mở rộng hình ảnh dường như không hoạt động trong chrome.Chuyển đổi chiều rộng/chiều cao hình ảnh không hoạt động
HTML:
<img src="foobar.png">
CSS:
img
{
float: left;
margin-right: 10px;
border-radius: 10px;
width: 200px;
-webkit-transition: width 1s ease, height 1s ease;
}
img:hover
{
width: 100%;
}
Fiddle: http://jsfiddle.net/6Dk4D/
Điều gì là sai?
Nó sẽ không hoạt động với tỷ lệ phần trăm. Ngoài ra, nếu bạn cũng muốn chuyển đổi height, bạn cần khai báo nó theo kiểu dáng img orignal. Hiển thị ở đây: http://jsfiddle.net/Skooljester/6Dk4D/1/ nó hoạt động nếu bạn chỉ định một pixel là width cho di chuột.
Chỉnh sửa: Nếu bạn chỉ định width đầu tiên là phần trăm thì thứ hai có thể được xác định bằng phần trăm là tốt và vẫn hoạt động. Cảm ơn bạn Tyilo
Bạn cũng có thể sử dụng thủ thuật max-width. Đặt số tiền cao max-width trên di chuột và chiều rộng hình ảnh ban đầu sẽ được tôn trọng bởi quá trình chuyển đổi.
Nó cũng hoạt động nếu bạn chỉ định cả hai giá trị độ rộng làm phần trăm. – Tyilo
Có thể liên quan đến báo cáo lỗi này: https://code.google.com/p/chromium/issues/detail?id=104787 – Gili