10

如何仅使用 HTML/CSS（即无服务器代码）调整图像大小，同时保持其比例并具有裁剪效果。详细信息：我希望将其调整为指定的宽度，保持比例，如果高度大于指定值，则将其裁剪到指定的高度？

实际上，我知道如何使用一些服务器代码来做到这一点，但我不想这样做。这意味着使用不同的文件引用并引用图片，例如<img src="picture.php" />. 我需要在显示它的同一页面中处理图像。

让我“困扰”的是我必须发送图像标题，因此页面上不会显示其他任何内容。

有没有办法做这样的事情？也许来自纯 HTML/CSS？:P

我做了一个函数来做类似的事情（除了“裁剪”的东西），它只返回width="" height=""，我像这样使用它<img src="image.jpg" resize("image.jpg") />，但我不明白我怎么能做那个裁剪......

谢谢

4

5 回答 5

16

好的，所以我设法从 html/css 中找到了一种方法。整个想法是摆脱那个“超高”：

<div style="width:200px;height:200px;overflow:hidden;" >
   <img src="image.jpg" width="200px" height="auto">
</div>

首先我的图像被调整到所需的宽度（保持比例），然后给包含 div 的固定高度，setting overflow to hidden并使脚本只显示图像的所需部分。

于 2010-02-10T01:21:19.263 回答
1

您不能在同一个文件中呈现图像和 HTML，因为浏览器依赖于其content-type标题来解释它。

HTML 文档的content-type标题通常设置为，text/html而图像的内容类型为image/*（用 * 代替图像格式）。您可以将图像数据打印到 HTML 文档中，但由于指示浏览器将其解释为text/html图像而不是图像，因此其内容会出现乱码。

您需要将您的<img>标签链接到您描述的 PHP 文件。我不确定为什么这会造成问题。这是正确的方法。您当然可以通过在 HTML 中操作其尺寸来裁剪图像，但我不建议您这样做。

于 2010-02-09T22:49:24.093 回答
1

您可以使用phpThumb 动态调整和裁剪图像。它使用 GD 库从图像 JPEG、PNG、GIF 等创建缩略图。

于 2010-02-10T00:16:12.610 回答
1

我认为 ImageMagick 支持“调整大小以适应”和“调整大小以填充”方法，后者是您正在寻找的。

在将您的 img 标签写入输出缓冲区之前，将图像保存到生成的建议文件名，并让“识别”为您提取该图像的宽度和高度。

如果您不想使用单独的文件，而是想要内联图像数据，请尝试较新的 Web 浏览器支持的data-uri 方法。这会将图像的二进制数据流内联到 html 文件中，因此它是嵌入的。

于 2010-02-09T23:25:12.953 回答
0

创建助手，如：

<?php
echo '<img src="' . image_resize($path_to_image, SIZE_X, SIZE_Y) . '" />';
?>

所以这个助手将检查是否已经创建了调整大小的图像或创建新的图像。并且在这两种情况下，它都会将正确的 url 返回到新图像。

于 2010-02-09T22:53:39.010 回答