在指定目录中上传之前调整PHP图像大小答案

【问题标题】：PHP Image resizing before uploading in the specified Directory在指定目录中上传之前调整PHP图像大小
【发布时间】：2017-03-21 21:54:21
【问题描述】：

您好，我正在开发一个网站，用户可以在其中上传他/她的个人资料图片。我的上传页面有一个 img 标签，因此用户可以在选择这张图片后在上传之前预览他们的图片的外观，事情是稍后将从数据库中获取图片的名称。这是我的 sn-p

 <img id="imgs" src="http://placehold.it/200x200" alt="your image"/>

我的上传器是这样的

if ( !!$_FILES['file']['tmp_name'] ) // is the file uploaded yet?
{
    $info = explode('.', strtolower( $_FILES['file']['name']) ); // whats the extension of the file
    $temp = explode(".",$_FILES["file"]["name"]);
    $filename = rand(1,9999) . '.' .end($temp);
    if ( in_array( end($info), $allow) ) // is this file allowed
    {
        if ( move_uploaded_file( $_FILES['file']['tmp_name'], $todir .  $filename ) )
        {

        }
    }
    else
    { }
}

顺便说一句，这个上传器脚本来自教程，所以是的，您可能会在这里发现几个安全问题和其他问题..

我遇到的问题是，当我上传尺寸为 200x200 的图像时，图像看起来很好，因为在我的 css 中，我定义了 imgs，宽度和高度都设置为 200 像素，但如果我上传了其他图像不符合我在 css 上设置的宽度和高度，如果图像更大，则图像会被拉伸

有什么想法可以解决这个问题吗？我还尝试直接在 img 上定义尺寸，结果显然相同我可以只用 css 解决这个问题吗？

【问题讨论】：

您是否正在寻找对 img 标签的 CSS 修复？如果是这样，#imgs { width:200px, height:200px; } 或
是的，如果可能的话..
您可以使用 div 而不是 img，使用不重复的背景图像并包含或覆盖背景大小。这有点低效，因为用户可能会上传超大文件，因此加载速度会变慢。
尽可能地避免现场裁剪，这就是为什么我没有考虑使用 jquery fyi 伙计们.. 但如果真的没有其他办法，我可能会去尽管如此.. :(
这只是纯 css 我的朋友。其他选项是服务器端裁剪，但这涉及更多工作。请指教。

标签： php html css image

【解决方案1】：

如果您只想依靠 CSS 来调整大小，请不要使用 width 和 height，而是使用 max-width 和 max-height。示例（未经测试）：

.my-img {
    max-width: 200px;
    max-height: 200px;   
}

这样你应该能够保持宽高比。

【讨论】：

图片小于img/div会怎样？它会跟随 img/div 标签还是图像会保持较小但 img/div 标签会跟随该图像并扭曲我当前的设计？
它将保持很小。好消息是您可以使用宽度或高度，但只能使用其中之一。另一个应该是 max-*。这样您就可以强制设置宽度或高度，并自动为您调整另一个。
嗯，我不确定我是否理解，抱歉，您是这样说的吗？ #imgs{ max-width :200px; height:100% };
我明白了，我试试这个:)

【解决方案2】：

我想补充一下 tacone 的评论。你应该这样做。

img#imgs {
        height: 100%;
        max-height: 200px;             
        width: 100%;
        max-width: 200px;

}

【讨论】：

@kim 如果图像小于 div/img 则 div 将缩小到该图像大小。
那么我应该为 img 标签添加一个外部 div 吗？只是为了保留 200x200 的尺寸？
@KimOliveros 如果您想在所有情况下都保留 200x200 的空间，那么它应该是这样的。 .container { 宽度：200px;高度：200px； } .container img { 最大宽度：200px;最大高度：200px；宽度：100%；高度：100%； }

【解决方案3】：

这里有一个关于图像大小调整的简单教程https://phpmatters.com/resize-image-using-php/

这是一个关于如何调整用户图像大小的示例 sn-p。有几个智能选项。 PHP 调整大小比允许用户在 HTML 页面中插入巨大的图像（仅限 CSS 的大小调整方法）更智能。

例如，如果您想调整到指定的宽度（例如 200 像素）但保持尺寸比相同，那么脚本可以为您计算出所需的高度，只需使用 resizeToWidth 函数。

<?php
    include('SimpleImage.php');
    $image = new SimpleImage();
    $image->load('picture.jpg');
    $image->resizeToWidth(200);
    $image->save('picture200x200.jpg');
?>

在 PHP 尺寸上，您还可以拒绝小于 200x200 的图像，因此您不必担心会保存不可接受的小图像。

...由于安全漏洞，不再支持此插件

FWIW，如果您有权访问服务器上的 .htaccess 文件，添加此文件将拒绝外部访问您的 timthumb.php。如果在内部使用，这是一个很棒的库。

# Prevent 'timthumb' hack attempt
RewriteRule ^(.*)?(timthumb\.php)$ - [F]

编辑： TimThumb 的替代库是 WideImage 库，它在 http://wideimage.sourceforge.net/examples/resizing/ 上具有许多功能

这里有一个关于在此处使用它的主题：Keeping aspect ration when resizing images using WideImage PHP library

【讨论】：

教程和实际的 sn-p 很容易理解，但它说由于安全漏洞，不再支持该插件。但我想我可以尝试寻找类似于此行的插件
有一个涉及 TimThumb 的 wordpress hack，但它是如何实现的。在像上面的代码这样的简单情况下，这通常不是问题。但是，还有一个替代方案：wideimage.sourceforge.net/examples/resizing 和一个演示 wideimage.sourceforge.net/wp-content/current/demo/?demo=resize
我明白了，谢谢，我会试试看，谢谢，我会尽快更新你：)
TimThumb 非常出色且易于内部使用。我更新了我的答案以反映您可以进行的调整以防止外部访问该脚本。我仍然使用它，因为它非常方便。
抱歉去度假了，所以是的，我无法回复你，是的，到目前为止，它的工作只是试图找出我使用 timthumbs 顺便说一句是否有任何附带问题.. :D

【解决方案4】：

这里有几个替代其他答案的选项。

一种选择是对图像进行物理修改。这是一个有效的 GDLib 图像大小调整/裁剪，它将调整图像大小以及裁剪：

Crop/Resize Image Function using GD Library

另一种选择是做一个<div>，你可以使用标题css和内联css的组合：

<style>
div#img {
    /* don't repeat background */
    background-repeat: no-repeat;
    /* "cover" will force the image to flood the background */
    /* based on smaller dimension */
    background-size: cover;
    height: 200px;
    width: 200px;
    display: inline-block;
}
</style>

<div id="img" style="background-image: url('http://placehold.it/200x200.jpg');"></div>

【讨论】：

【解决方案5】：

这应该保持您想要的高度和适当的纵横比。任何大小的图像都不会超过 CSS 中设置的预定义 200 X 400。

CSS:
body{margin: 0;padding:0;}
#styled>div{
    position:relative;
    margin: 0 auto;
    max-width:400px;
    background: #333;
    text-align:center;
    border:1px solid lime;
    }
#styled>div>img{
    max-height:200px;
    }
#not-styled>div{
    position:relative;
    margin: 0 auto;
    background: #333;
    text-align:center;
    border:1px solid blue;
    }



 HTML:
<div id="styled">
        <div><img src="path/to/your/image.png" alt="" /><p>img size: 250x250</p></div>
        <div><img src="path/to/your/image2.png" alt="" /><p>img size: 850x500</p></div>
    </div>
    <div id="not-styled">
        <p>NOT styled</p>
        <div><img src="path/to/your/image.png" alt="" /><p>img size: 250x250</p></div>
        <div><img src="path/to/your/image2.png" alt="" /><p>img size: 850x500</p></div>
    </div>

你可以在webbdesign.ca/photo_aspect_example.html看到一个例子

【讨论】：