懸停/縮放變換背景圖像

我已經使用下面的代碼來創建一行圖像保持器，它可以是縱向或橫向。我無法解決如何將懸停比例轉換應用於每張圖片（較大）。下面是代碼：懸停/縮放變換背景圖像

<ul> 
    <li> 
     <div style="width:150px; height:150px; 
      background: url('img/2.png') no-repeat center; 
      border:1px solid red;"> 
     </div> 
    </li> 


    <li> 
     <div style="width:150px; height:150px; 
      background: url('img/1.png') no-repeat center; 
      border:1px solid red;"> 
     </div> 
    </li> 

    <li> 
     <div style="width:150px; height:150px; 
      background: url('img/3.png') no-repeat center; 
      border:1px solid red;"> 
     </div> 
    </li> 
</ul>

來源

2012-11-08 user1766493

li div:hover{ 
    transform:scale(1.1,1.1); 
}

來源

2012-11-08 16:52:26

對不起，我現在有分辨率的問題 - 背景圖片大小不能讓我怎麼擴展到更大的版本改變了嗎？ – user1766493

你能解釋一下自己好一點嗎？ –

感謝您回來 - 這種方式使用固定大小的圖像 - 我所有的圖像都不能大於150像素，所以如果我應用比例變換，那麼我會得到像素化的縮略圖。我想將鼠標懸停在圖像上，並將縮略圖轉換爲更高分辨率的圖像。我試圖隱藏高分辨率圖像，但它不是一個平滑的過渡。看起來，背景圖像的想法可能適用於肖像/風景，但不適用於縮放。對不起，如果我不清楚。 – user1766493

懸停/縮放變換背景圖像

回答

相關問題