1

有没有一种方法可以仅使用 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 图像。对不起，但我不擅长解释这一点。

4

3 回答 3

4

更新：http: //jsfiddle.net/LTrqq/5/的一个例子

为了

  1. 您可以只使用CSSwidth和元素height<img>
  2. 可以通过 (1) 来完成，并将此图像放入一个 div 和position: absolute，并带有所需的topand left，并将其放入另一个带有 的 div 中position: relative，并且这个外部 div 可以有width: 100px、height: 100px和overflow: hidden
  3. 与 (2) 相同，具有期望值top和left值。

我们需要position: relative(2) 中的外部 div，因为我们希望内部 div 相对于这个外部 div 定位，而不是相对于整个文档。

对于topand left，它就像top: -50px; left: -50px一个例子。

于 2012-11-17T16:59:52.787 回答
0

您可以将图像定义为任何尺寸，然后将其放在 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" />

于 2012-11-17T18:45:00.850 回答
0

刚刚从我的头顶上完成了这个，但如果不完全准确的话，它应该几乎在那里。-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 的一半，所以应该让它居中。

于 2012-11-17T17:07:02.930 回答