Question

您好我正在开发一个用户可以上传他/她的个人资料图片的网站。我的上传页面有一个img标签，以便用户在选择此图片之后可以预览他们的图片在上传之前的样子。事情是图像的名称将在稍后从数据库中获取。这是我的代码片段

 <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，宽度和高度都设置为200px但是如果我上传的其他图片不符合我在我的CSS上设置的宽度和高度，如果图像变大则会变成拉伸

我有什么想法可以解决这个问题吗？我也尝试直接在img上定义尺寸，结果显然也是如此我可以单独用css解决这个问题吗？

Answer 1

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

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

这样你就可以保持宽高比。

Answer 2

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

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

}

Answer 3

这是一个关于https://phpmatters.com/resize-image-using-php/

的图像大小调整的简单教程

以下是如何调整用户图片大小的示例摘录。有几个智能选项。 PHP调整大小比允许用户在HTML页面中插入大图像（仅限CSS的大小调整方法）更聪明。

例如，如果要调整指定宽度（例如200px）但保持尺寸比相同，则脚本可以为您计算所需的高度，只需使用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

Answer 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>

Answer 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

查看示例

PHP映像在上载到指定目录之前调整大小

5 个答案: