嗨，我正在开发一个网站，用户可以在其中上传他/她的个人资料图片。我的上传页面有一个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中，我定义了宽度和高度都设置为200px的imgs，但如果我上传了其他不符合我在css上设置的宽度和高度的图像，如果它的更大，图像就会变为拉伸
有什么想法我该怎么解决吗？我还尝试直接在img上定义尺寸，结果显然是一样的我能只用css来解决这个问题吗？
如果只想依靠CSS调整大小，请不要使用width和height，而是使用max-width和max-height。示例（未经测试）：
.my-img {
max-width: 200px;
max-height: 200px;
}
通过这种方式，您应该能够保持宽度/高度比。
我想补充一下tacone的评论。你应该这样做。
img#imgs {
height: 100%;
max-height: 200px;
width: 100%;
max-width: 200px;
}
这里有一个关于调整图像大小的简单教程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/
这里有一个关于在这里使用它的SO线程：使用WideImage PHP库调整图像大小时保持纵横比
这里有几个替代答案。
一种选择是对图像进行物理修改。这是一个工作的GDLib图像调整大小/裁剪，它将调整图像的大小以及裁剪：
使用GD库的裁剪/调整图像大小功能
另一个选项是执行<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>
这样可以保持所需的高度和适当的纵横比。任何大小的图像都不会超过CSS中预先定义的200X400。
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