有實施困難-webkit-轉變爲擴大圖像照相館

我有這樣的關於照片畫廊的概念問題：如果你在支持CSS過渡瀏覽器中打開這個有實施困難-webkit-轉變爲擴大圖像照相館

http://www.nikesh.me/demo/image-hover.html

（例如Chrome），它會平滑地縮放懸停的圖像，而縮放版本保持高質量。

這是通過將非縮放圖像顯示爲比實際尺寸略小的圖像來實現的，實質上縮放顯示了它們的真實尺寸。

所以，在正常的圖像首先縮小：

-webkit-transform:scale(0.8);

然後在懸停的提升：

-webkit-transform:scale(1.2);

我的問題：最初的縮減應該如何爲做瀏覽器工作不支持這種縮小的方法嗎？嘗試在IE瀏覽器中打開該畫廊以查看我的意思，它顯示的圖像沒有縮小，這使得它們太大，從而破壞了佈局。

我想要什麼：

在支持它的瀏覽器中充分發揮作用。重要的是縮放版本仍然保持質量。
沒有影響在所有的不支持它的瀏覽器，但堅實的原始尺寸，以便沒有佈局被打破
應該兩個圖像的方向工作，並有可能在圖像的寬度和高度也

品種

有人嗎？最好是一個不需要瀏覽器嗅探或JavaScript的優雅解決方案，但所有的答案都是值得歡迎的。

來源

2011-01-07 Ferdy

IE支持一種縮放：縮放。請參閱http://msdn.microsoft.com/en-us/library/ms531189(v=vs.85).aspx – RoToRa

如果你想讓它在不使用javascript的情況下工作，那麼它似乎是唯一的方法是放棄使用CSS的初始縮小比例。您將需要以「過時」的方式調整標記中圖像的寬度和高度。

<img src="yourImageSrc" width="80%" height="80%">

這將允許你仍然保持你的佈局圓通如果用戶代理是不是最新的。

**我不知道百分比是否在字面高度/寬度定義中起作用。但你總是可以找出你需要的比例並將其插入。

來源

2011-01-14 15:47:17 John

我取得了一些進展，但仍然存在一些問題。事實上，單獨一個百分比並不能削減它，我必須計算實際圖像和縮小圖像之間的比率，並將其用作字面寬度和高度。這工作。兩個問題仍然存在：1）在Chrome（9）中，放大的圖像質量較差。這不是我期望的，因爲我故意加載的圖片比我展示的要大。 2）FF3.6可以將圖像正確放大到高質量，但沒有動畫效果。這不是什麼大問題，但是因爲我使用了FF 3.6，所以我應該支持這個3.5 – Ferdy

不管怎樣，只要SO允許，我會給你獎勵。我認爲你的回答是正確的，但我可能會放棄這個功能，它在任何瀏覽器（動畫+高質量縮放）中都無法正常工作。 – Ferdy

有實施困難-webkit-轉變爲擴大圖像照相館

回答

相關問題