Question

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

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

“困扰”我的是我必须发送图片标题，以便页面上不显示任何其他内容。

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

我创建了一个类似的东西（除了“crop”之外的东西），它只返回width="" height=""，我就像<img src="image.jpg" resize("image.jpg") />一样使用它，但是我不知道怎么办？那种作物......

由于

Answer 1

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

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

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

Answer 2

您无法在同一文件中呈现图片和HTML，因为浏览器依赖其content-type标头来解释它。

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

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

Answer 3

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

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

如果您不想使用单独的文件，而是想要内嵌图像数据，请尝试data-uri method更新的网络浏览器支持。这内嵌了html文件中图像的二进制数据流，因此它是嵌入的。

Answer 4

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

Answer 5

创建帮手，如：

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

所以这个帮助器将检查已经创建的已调整大小的图像或创建新图像。在这两种情况下，它都会向新图像返回正确的URL。