如何在保持比例的同时在纯 HTML/CSS 中调整图像大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2233076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to resize an image in pure HTML/CSS while keeping its proportions?
提问by kmunky
How can I resize an image using HTML/CSS only (i.e no server code) while keeping its proportions and have a crop effect. Details: I wish to resize it to a specified width, keep the proportions and if the height is bigger than a specified value to crop it to the specified height ?
如何仅使用 HTML/CSS（即无服务器代码）调整图像大小，同时保持其比例并具有裁剪效果。详细信息：我希望将其调整为指定的宽度，保持比例，如果高度大于指定的值，则将其裁剪为指定的高度？
Actually, I know how to do that using some server code but I don't want to do this. It would imply using a different file reference and refer the picture something like <img src="picture.php" />. I need to process the image in the same page that displays it.
实际上，我知道如何使用一些服务器代码来做到这一点，但我不想这样做。这意味着使用不同的文件引用并引用类似<img src="picture.php" />. 我需要在显示它的同一页面中处理图像。
What "bothers" me is that I have to send the image header so nothing else on the page will be displayed.
“困扰”我的是我必须发送图像标题，因此页面上不会显示任何其他内容。
Is there a way to do something like that? Maybe from pure HTML/CSS? :P
有没有办法做这样的事情？也许来自纯 HTML/CSS？:P
I made a function that does something like that (except that "crop" thing) and it returns just width="" height=""and I use it like this <img src="image.jpg" resize("image.jpg") />, but I don't get how can i do that crop...
我做了一个函数来做类似的事情（除了那个“裁剪”的东西）它只是返回width="" height=""，我像这样使用它<img src="image.jpg" resize("image.jpg") />，但我不知道我怎么做那个裁剪......
Thanks
谢谢
回答by kmunky
ok, so i managed to find a way to do that from html/css. The whole idea was to get rid of that "extraheight" :
好的，所以我设法从 html/css 中找到了一种方法。整个想法是摆脱那个“额外高度”：
<div style="width:200px;height:200px;overflow:hidden;" >
<img src="image.jpg" width="200px" height="auto">
</div>
first my image is resized to desired width(keeping the proportions) and then giving a fixed height to containing div and setting overflow to hiddenmakes the script to display just the desired portion of the image.
首先我的图像被调整为所需的宽度（保持比例），然后给包含 div 一个固定的高度setting overflow to hidden并使脚本只显示图像的所需部分。
回答by Johannes Gorset
You can't render an image and HTML in the same file because browsers depend on its content-typeheader to interpret it.
您不能在同一个文件中呈现图像和 HTML，因为浏览器依赖于其content-type标头来解释它。
The content-typeheader of a HTML document is generally set to text/htmlwhereas the content-type of an image is image/*(substitute * for image format). You could print image data to a HTML document, but since the browser is instructed to interpret it as text/htmlrather than an image its contents would be garbled.
content-typeHTML 文档的标题通常设置为 ，text/html而图像的内容类型为image/*（用 * 代替图像格式）。您可以将图像数据打印到 HTML 文档，但由于指示浏览器将其解释为text/html图像而不是图像，因此其内容将是乱码。
You will need to link your <img>tag to a PHP file like you described. I'm not sure why that constitutes a problem; it's the right way to go about it. You could of course crop the image by manipulating its dimensions in HTML, but I don't recommend you do.
您需要将<img>标签链接到您描述的 PHP 文件。我不确定为什么这会构成一个问题；这是正确的方法。您当然可以通过在 HTML 中操作其尺寸来裁剪图像，但我不建议您这样做。
回答by hurikhan77
I think ImageMagick supports "resize to fit" and "resize to fill" methods, the latter being what you are looking for.
我认为 ImageMagick 支持“调整大小以适合”和“调整大小以填充”方法，后者是您正在寻找的方法。
Before writing your img tag to the output buffer, save the image to the resulting proposed file name and let 'identify' extract the width and height of this image for you.
在将 img 标签写入输出缓冲区之前，将图像保存为生成的建议文件名，然后让“识别”为您提取此图像的宽度和高度。
If you don't want to work with a seperate file but instead want the image data inline, try the data-uri methodwhich newer web browsers support. This inlines the binary data stream of the image within the html file, so it is embedded.
如果您不想使用单独的文件，而是希望内联图像数据，请尝试较新的 Web 浏览器支持的data-uri 方法。这将图像的二进制数据流内联在 html 文件中，因此它被嵌入。
回答by Chetan Sharma
You can use phpThumb, to resize and cropping the images on the fly. It uses the GD library to create thumbnails from images JPEG, PNG, GIF, etc.
您可以使用phpThumb 动态调整图像大小和裁剪图像。它使用 GD 库从 JPEG、PNG、GIF 等图像创建缩略图。
回答by zerkms
create helper like:
创建助手，如：
<?php
echo '<img src="' . image_resize($path_to_image, SIZE_X, SIZE_Y) . '" />';
?>
so this helper will check if resized image already created or create new one. and in both cases it returns proper url to the new image.
所以这个助手会检查调整大小的图像是否已经创建或创建新的。在这两种情况下，它都会向新图像返回正确的 url。
