如何让我的PHP脚本使图像平方，同时保持原始比例？

Question

我一直在开发我的网站已有一段时间了，我希望通过一个小细节让它变得更好。目前，当用户创建和帐户时，他们可以查看他们的“我的页面”并做各种各样的事情，包括将他们的个人资料图片从我提供的默认图片更改为他们想要的任何内容。不幸的是，如果他们上传的图像的比例大于或小于1：1，即300x200，那么我的脚本将重新调整大小以适合头像形式，但它保持比例，并使图像漂浮到盒子的顶部。这是一个没有1：1比例的头像的图像：

如您所见，图像就像我在上面描述的那样。只有当用户上传的图像具有1：1的比例时，它才能形成完美的正方形。这是一个例子：

显然，期望用户始终上传1：1图像是不合理的。所以我正在寻找的是帮助我调整我的脚本的人，我会提供，所以在所有头像上传中，即使图像的比例为1：1，也会将图像装入黑色的“画布”中，因为缺乏更好的措辞，并且在垂直和水平方向上将图像置于画布上。这就是我的意思，使用我在Photoshop中编辑的图像为它提供黑色画布：

正如您所看到的，最后一张图片中的个人资料图片正是我需要我的脚本所要做的。我将提供我的剧本：

PHP

<?php 
if (isset($_FILES["avatar"]["name"]) && $_FILES["avatar"]["tmp_name"] != ""){
$fileName = $_FILES["avatar"]["name"];
$fileTmpLoc = $_FILES["avatar"]["tmp_name"];
$fileType = $_FILES["avatar"]["type"];
$fileSize = $_FILES["avatar"]["size"];
$fileErrorMsg = $_FILES["avatar"]["error"];
$kaboom = explode(".", $fileName);
$fileExt = end($kaboom);
list($width, $height) = getimagesize($fileTmpLoc);
if($width < 10 || $height < 10){
    header("location: ../message.php?msg=ERROR: That image has no dimensions");
    exit(); 
}
$db_file_name = rand(100000000000,999999999999).".".$fileExt;
if($fileSize > 2048576) {
    header("location: ../message.php?msg=ERROR: Your image file was larger than 2MB");
    exit(); 
} else if (!preg_match("/\.(gif|jpg|png)$/i", $fileName) ) {
    header("location: ../message.php?msg=ERROR: Your image file was not jpg, gif or png     type");
    exit();
} else if ($fileErrorMsg == 1) {
    header("location: ../message.php?msg=ERROR: An unknown error occurred");
    exit();
}
$sql = "SELECT avatar FROM users WHERE username='$log_username' LIMIT 1";
$query = mysqli_query($db_conx, $sql);
$row = mysqli_fetch_row($query);
$avatar = $row[0];
if($avatar != ""){
    $picurl = "../user/$log_username/$avatar"; 
    if (file_exists($picurl)) { unlink($picurl); }
}
$moveResult = move_uploaded_file($fileTmpLoc, "../user/$log_username/$db_file_name");
if ($moveResult != true) {
    header("location: ../message.php?msg=ERROR: File upload failed");
    exit();
}
include_once("../php_includes/image_resize.php");
$target_file = "../user/$log_username/$db_file_name";
$resized_file = "../user/$log_username/$db_file_name";
$wmax = 200;
$hmax = 300;
img_resize($target_file, $resized_file, $wmax, $hmax, $fileExt);
$sql = "UPDATE users SET avatar='$db_file_name' WHERE username='$log_username' LIMIT 1";
$query = mysqli_query($db_conx, $sql);
mysqli_close($db_conx);
header("location: ../user.php?u=$log_username");
exit();
}
?>

在此先感谢，任何帮助将不胜感激！

Answer 1

将图像作为背景插入而不是img标记，然后您可以将其放置在中心位置。

<div class="avatar"></div>

.avatar {
width: 200px;
height: 200px;
background-image: url("avatar.png");
background-repeat: no-repeat;
background-position: center center;
border-radius: 50%; // If you want it to be a circle
}