如何在纯HTML/CSS中调整图像大小并保持其比例？

Question

如何使用 HTML/CSS 在没有服务器代码的情况下调整图片大小（保持比例），并具有裁剪效果？

细节：我希望将其调整为指定的宽度，保持比例，并且如果高度大于指定值，则将其裁剪到指定的高度？

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

令我“困扰”的是，我必须发送图像头文件，以便页面上没有其他内容被显示。

有没有办法做到这样的事情？也许只使用纯HTML/CSS？ :P

我创建了一个函数来做类似的事情（除了那个“裁剪”），它只返回width ="" height =""，我像这样使用它：<img src="image.jpg" resize("image.jpg") />，但我不知道如何裁剪...

谢谢

- kmunky

Answer 1

好的，我设法找到了一种从HTML/CSS实现的方法。整个想法是要摆脱那个“extraheight”：

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

首先，将我的图像调整为所需的宽度（保持比例），然后给包含的div设置固定高度，并且设置overflow为hidden使脚本仅显示所需部分的图像。

- kmunky

---

说句实话，我成功地从父级div中删除了style属性。只需在img标签上使用width="200px"和height="auto"，然后将其包装在一个div中即可。 - l p

Answer 2

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

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

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

- Johannes Gorset

---

在同一个文件中没有办法做到这一点吗？ - kmunky

@kmunky 有一种方法... 如果我理解正确，您想要内联图像数据。 - hurikhan77

Answer 3

我认为ImageMagick支持“resize to fit”和“resize to fill”方法，后者是你要找的。

在将img标签写入输出缓冲区之前，将图像保存到所提议的文件名，并让'identify'为您提取此图像的宽度和高度。

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

- hurikhan77

Answer 4

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

- Chetan Sharma

Answer 5

创建类似帮助程序的功能：

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

因此，这个辅助程序将检查是否已经创建了调整大小的图像或创建新的图像。在两种情况下，它都会返回新图像的正确URL。

- zerkms