Question

有没有办法只使用html / css调整图像大小，裁剪和居中图像？（img tag或css sprite）

例如，如果我有一个500x500像素的图像，

我想将其调整为250x250像素图像
我想让实际可见图像为100x100，但仍然具有250x250尺寸图像的比例。
我希望图像的中心位于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/

的示例

对于

您可以使用CSS的width和height作为<img>元素
可以通过（1）完成，并将此图片放入div中，将position: absolute放入期望的top和left，并将其放在另一个div中{ {1}}，此外部div可以有position: relative，width: 100px和height: 100px
与（2）相同，具有所需的overflow: hidden和top值。

我们需要{2}中外部div的left，因为我们希望内部div相对于这个外部div而不是相对于整个文档的位置。

对于position: relative和top，它就像left一样。

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指向它。例如：＆lt; img src =“/ timthumb.php？mycat.jpg＆amp; h = 250＆amp; w = 250”/＆gt;

在html / css中调整大小并居中图像？

3 个答案: