CSS3動畫圖像質量的規模

我已縮小的圖像，onclick縮放到圖像的原始大小。當圖像處於縮小狀態時，圖像質量非常差。任何方式來改善這一點？CSS3動畫圖像質量的規模

（這裏是一個的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">

來源

2016-05-11 Waltari

不是真的......不，除了使用SVG圖像， –

你需要用CSS來做到這一點嗎？解決方案與jQuery會給你更好的圖像質量。例如https://jsfiddle.net/w9o2chmn/15/ – jakob

添加的transform: scale(0.5)backface-visibility: hiddenhttps://jsfiddle.net/w9o2chmn/12/

使用zoom:50%代替：https://jsfiddle.net/w9o2chmn/11/

這兩個修復程序都只能在Chrome中使用！

來源

2016-05-11 10:43:29 muetzerich

有沒有反正在動畫中使用它？ – Waltari

這是一個竅門，不起作用。質量仍然差。請避免僅適用於XX的非標準屬性，我們需要實現一個免費的萬維網，而不是僅限於Chrome瀏覽器的世界。 https://developer.mozilla.org/es/docs/Web/CSS/zoom –

我非常需要在所有現代瀏覽器上運行它，包括移動 – Waltari

-1

拍攝照片並將其調整到任何照片編輯應用程序中可能會更好。我發現如果我需要調整圖像大小並且不想在第三方應用中使用顆粒狀和像素化的照片。如果您想要在點擊或懸停圖像時進行轉換，您可以使用原始圖像並製作所需大小的圖像的第二個副本。然後，您可以使用另一個轉換，因此當單擊照片時，即使它是兩個不同的圖像，也會在正常顯示時轉換圖像的大小。

來源

2017-03-20 14:03:45

我只是使用縮略圖並設置onclick加載您的大圖像。如果你不想在jQuery中做這件事，你可以用CSS這種方式分別格式化縮略圖和常規圖像。但更簡單的是保存先前編輯的兩個版本。

來源

2017-08-31 06:07:25

CSS3動畫圖像質量的規模

回答

相關問題