在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”/>