Hướng dẫn how to zoom out image in css - cách thu nhỏ hình ảnh trong css

Hãy nói rằng tôi cần phải tạo ra một hình ảnh động để thu nhỏ hình ảnh. Hình ảnh này được đặt bởi người dùng trang web của tôi và tôi không biết độ phân giải của nó. Vì vậy, có một hình ảnh ngẫu nhiên trên trang và khi một khách truy cập nhấp vào nút, nó sẽ thu nhỏ hình ảnh. JavaScript/jQuery chỉ được sử dụng trong ví dụ của tôi để cho bạn biết, quan điểm của tôi là gì, vì vậy phương pháp CSS là những gì tôi đang tìm kiếm. Theo văn bản này, bạn có thể thấy ví dụ mã của tôi. Khi bạn nhấp vào mỏ neo "chuyển đổi", nó sẽ thu nhỏ hình ảnh.only in my example to let you know, what's my point, so CSS approach is what I am looking for. Under this text, you can see my code example. When you click on the "toggle" anchor, it should zoom image away.

$[function[] {
  $['.toggle'].click[function[e] {
    e.preventDefault[];
    $['#test'].toggleClass['active'];
  }];
}];

#test {
  position: relative;
  width: 500px;
  height: 150px;
  overflow: hidden;
}
#test img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate[-50%, -50%];
  transition: all 5s;
}
#test.active img {
  width: auto;
  height: 100%;
}

  

Toggle

EDIT:

Vì câu hỏi này đã nhận được rất nhiều quan điểm, tôi đã cập nhật JSFiddle cũ mà tôi đã chỉ ra trong câu trả lời được chấp nhận như một giải pháp. Nó không tốt và bạn không nên sử dụng nó. Có 99% cơ hội bạn không cần sử dụng nó như vậy.should not use it at all. There is a 99% chance you don't need to use it like that.

//jsfiddle.net/gej1zb67/

Hỏi ngày 11 tháng 4 năm 2016 lúc 13:51Apr 11, 2016 at 13:51

Toggle

Đã trả lời ngày 11 tháng 4 năm 2016 lúc 14:57Apr 11, 2016 at 14:57

1