Chất lượng hình ảnh động CSS3 trên thang tỷ lệ

Question

Tôi có hình ảnh bị thu nhỏ kích thước trên nền quy mô hình ảnh. Chất lượng hình ảnh rất kém khi hình ảnh ở trạng thái thu nhỏ. Bất kỳ cách nào để cải thiện điều này?

(Đây là một jsfiddle: https://jsfiddle.net/w9o2chmn/7/)

$(document).ready(function() { 
 
    var zoomed = false; 
 
    var card = $("#card0"); 
 
    card.click(function() { 
 
     zoomFunction(); 
 
    }); 
 

 
    function zoomFunction() { 
 
     if (zoomed) { //card flipped so front is invisible and back is visible. 
 
      zoomed = false; 
 
      card.removeClass('zoom'); 
 
     } else { //card not flipped so front is visible and back is invisible 
 
      zoomed = true; 
 
      card.addClass('zoom'); 
 
     } 
 
    }; 
 
});

html {height: 100%;} 
 
.zoom {transform: scale(1.0);} 
 
img { 
 
    transform: scale(0.5); 
 
    transform-style: preserve-3d; 
 
    transition: 1s; 
 
}

<img id="card0" src="http://valtterilaine.bitbucket.org/png/vihainen.png">

Answer 1

• thêm backface-visibility: hiddenhttps://jsfiddle.net/w9o2chmn/12/

• sử dụng zoom:50% thay vì transform: scale(0.5): https://jsfiddle.net/w9o2chmn/11/

cả hai bản sửa lỗi chỉ hoạt động trong chrome!

Answer 2

Có thể tốt hơn là chụp ảnh và đổi kích thước ảnh trong bất kỳ ứng dụng chỉnh sửa ảnh nào. Tôi đã tìm thấy rằng nếu tôi cần phải thay đổi kích thước hình ảnh và không muốn một hình ảnh hạt và pixelated để làm điều đó trong một ứng dụng của bên thứ ba. Nếu bạn muốn chuyển đổi khi hình ảnh được nhấp hoặc di chuột, bạn có thể là hình ảnh gốc và tạo một bản sao thứ hai của hình ảnh ở kích thước mong muốn. Sau đó, bạn có thể sử dụng một chuyển tiếp khác để khi bức ảnh được nhấp, nó sẽ biến đổi kích thước của hình ảnh trong khi nhìn bình thường mặc dù nó là hai hình ảnh khác nhau.

Answer 3

Tôi sẽ chỉ sử dụng hình thu nhỏ và đặt onclick để tải hình ảnh lớn hơn của bạn. Bạn có thể định dạng cả hình thu nhỏ và hình ảnh thông thường một cách riêng biệt theo cách này bằng cách sử dụng CSS nếu bạn không muốn làm điều đó trong jquery. Nhưng thậm chí đơn giản hơn sẽ là để lưu hai phiên bản đã chỉnh sửa trước đó.