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.

https://jsfiddle.net/gej1zb67/

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

Patrik Krehákpatrik KrehákPatrik Krehák

2.7378 Huy hiệu vàng30 Huy hiệu bạc58 Huy hiệu Đồng8 gold badges30 silver badges58 bronze badges

3

Có lẽ đây là những gì bạn đang tìm kiếm?

#test.active img {
  transform: scale(2,2);
}

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

1

Tôi thấy chuyển tiếp không hoạt động với giá trị tự động tại thời điểm này. Bạn chỉ có thể cho IMG một pixel / tỷ lệ phần trăm hoặc chiều rộng EM. Điều đó sẽ hoạt động (không phải như bạn muốn, nhưng nó sẽ làm động).

Nikita Vasilyev đã thực hiện giải pháp JS cho vấn đề giá trị tự động:

http://n12v.com/css-transition-to-from-auto/

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

Tôi không nghĩ rằng có một cách duy nhất của CSS, nhưng bạn có thể đặt các giá trị bằng JavaScript và để quá trình chuyển đổi CSS xử lý hoạt hình.

.

(Chuyển đổi chức năng) Sau đó, bạn chỉ cần thay đổi kích thước của hình ảnh theo dữ liệu 'zoom' đó;

Tôi nghĩ đó là cách đơn giản nhất để đạt được hiệu ứng mong muốn

$(function() {
  
  function init(img){
    var sizes = {
          iHeight: img.height(),
          iWidth: img.width(),
          pHeight: img.parent().height(),
          pWidth: img.parent().width()
        };
    sizes.prop = sizes.iWidth / sizes.iHeight;
    img.data('zoom', false).data('sizes',sizes).width(sizes.iWidth).height(sizes.iHeight);
  }

  function toggleZoom(img){
    var hasZoom = img.data('zoom'),
        sizes = img.data('sizes');
    if(!hasZoom){
      img.width(sizes.prop * sizes.pHeight).height(sizes.pHeight);
    }else{
      img.width(sizes.iWidth).height(sizes.iHeight);
    }
    img.data('zoom', !hasZoom);
  };
  
  setTimeout(function() {
    init($('#test img'));
  }, 300);

  $('.toggle').click(function(e) {
    e.preventDefault();
    // $('#test').toggleClass('active');
    toggleZoom($('#test img'));
  });
});

#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;
}

  


Toggle

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

1