使用CSS來縮放和重新定位一個圖像內的div？

我們知道如何使用CSS僅顯示div內圖像的部分（即圖像精靈），但圖像必須是背景圖像。使用CSS來縮放和重新定位一個圖像內的div？

我們知道如何使用CSS縮放圖像，但圖像必須是IMG。

有誰知道縮放和圖像的方式，只顯示它的一部分？

例如，我想：

顯示像素（15,15）到（100,100），和
規模它由200％。

我能做的第一個背景圖片。第二我可以通過使它成爲一個前景圖像。但到目前爲止，我還沒有確定如何做到這一點。它甚至可能只使用CSS/HTML？

來源

2010-05-02 pbarney

您可以像往常一樣縮放圖像。然後，使用容器div來裁剪圖像。要設置裁切矩形的位置，請在圖像上使用position: relative（不包含div）。以下是使用計算器標誌的示例：

<style type="text/css"> 
div { 
    /* Set size of crop area. Setting its location happens bellow. */ 
    width: 150; 
    height: 100; 
    overflow: hidden; /* Crop it like it's hot! */ 

    /* not part of the implementation; only to display what's going on */ 
    border: 1px solid black; 
    background-color: #ddd; 
} 

img { 
    /* Set the crop location by shifting the image 
    * up by 70px and to the right by 30px. 
    */ 
    position: relative; 
    top: -70px; 
    left: 30px; 

    /* Scale the image as you normally would. */ 
    width: 300px; 
    height: 150px; 
} 
</style> 

<div> 
    <img src="http://sstatic.net/so/img/logo.png"> 
</div>

來源

2010-05-02 04:45:37 allyourcode

使用CSS來縮放和重新定位一個圖像內的div？

回答

相關問題