在html / css中調整大小並居中圖像？

Question

有沒有辦法只使用html / css調整圖像大小，裁剪和居中圖像？ （img標簽或css精靈）

例如，如果我有一個500x500像素的圖像，

1. 我想將其調整為250x250像素的圖像

2. 我想將實際可見圖像設置為100x100，但仍然具有250x250大小的圖像的比例。

3. 我希望圖像的中心位於x，y位置。

只有html / css才有可能，如果沒有，你怎么建議我用javascript去做？

編輯 - 動靜能量：

對於（2），說我的縮放圖像現在是200x200，我希望我的可見圖像是100x100：所以我猜我的意思是我希望圖像的比例和分辨率為200x200但我希望可見圖像是100x100或換句話說，可見圖像將位於坐標x，y：0,0; 0,100; 100,0; 100,100; 200x200圖像。 對不起，但我不擅長解釋這個。

Answer 1

更新： http : //jsfiddle.net/LTrqq/5/上 的示例

對於

1. 您可以使用CSS的width和height來表示<img>元素
2. 它可以通過（1）完成，並將此圖像放入div中，並將其position: absolute ，使用所需的top和left ，並將其放置在另一個div中， position: relative ，此外部div可以具有width: 100px ， height: 100px ， overflow: hidden
3. 與（2）相同，具有所需的top和left值。

我們需要position: relative對於（2）中的外部div，因為我們希望內部div相對於這個外部div而不是相對於整個文檔的位置。

對於top和left ，它就像top: -50px; left: -50px top: -50px; left: -50px為例。

Answer 2

剛從頂部做到這一點，但如果不完全准確，它應該幾乎在那里。 -X和-Y坐標可以使您獲得裁剪偏移。 因此，例如，如果你想從20x30進行裁剪，你可以使它們成為-20px和-30px。

<style>
    #crop { width: 100px; height: 100px; display: block; overflow: hidden; position: relative; }
    #crop img { position: absolute; left: -X; top: -Y; }
</style>

<div id="crop">
    <img src="500x500.jpg" width="250" height="250">
</div>

如果你想要居中它並且你知道裁剪容器中圖像的大小，你可以使用以下CSS：

#crop img { position: absolute; left: 50%; top: 50%; margin: -125px 0 0 -125px; }

125px是250的一半所以它應該使它成為核心。

Answer 3

您可以將圖像定義為任何尺寸，然后將其放置在div中並隱藏溢出以實現裁剪效果。 但是，如果您真的想裁剪圖像，以便說有人想要下載它的副本並進行縮放檢查： http ： //deepliquid.com/projects/Jcrop/demos.php

但是如果你可以嘗試PHP，那么http://www.binarymoon.co.uk/projects/timthumb/非常容易使用，只需將它放在你的服務器上並將你的img標簽src指向它。 例如：<img src =“/ timthumb.php？mycat.jpg＆h = 250＆w = 250”/>