Php 调整图像大小/裁剪以调整布局

我对将缩略图重新调整大小/缩放到所需布局存在问题。我可以生成缩略图，这是裁剪/调整大小的代码

$filename = $key.$_FILES["files"]["name"][$key];
    $filetmp = $_FILES["files"]["tmp_name"][$key];
    $filetype = $_FILES["files"]["type"][$key];
    $filesize = $_FILES["files"]["size"][$key];
    $fileinfo = getimagesize($tmp_name);
    $filewidth = $fileinfo[0];
    $fileheight = $fileinfo[1];
    // GETS FILE EXTENSION
    $fileextension = pathinfo($filename, PATHINFO_EXTENSION);
    $microtime = preg_replace('/[^A-Za-z0-9]/', "", microtime());
    $filepath = "../static/products/".$microtime.".".$fileextension;
    $filepath_thumb = "../static/products/thumbs/".$microtime.".".$fileextension;
    $filepath2 = "/static/products/".$microtime.".".$fileextension;
    move_uploaded_file($filetmp,$filepath);



if ($filetype == "image/jpeg") {
    $imagecreate = "imagecreatefromjpeg";
    $imageformat = "imagejpeg";
}

if ($filetype == "image/png") {
    $imagecreate = "imagecreatefrompng";
    $imageformat = "imagepng";
}

if ($filetype == "image/gif") {
    $imagecreate = "imagecreatefromgif";
    $imageformat = "imagegif";
}

$ratio = $filewidth * 1.0 / $fileheight; // width/height
if( $ratio > 1) {
    $new_width = 600;
    $new_height = 600/$ratio;
}
else {
    $new_width = 600*$ratio;
    $new_height = 600;
}

    $image_p = imagecreatetruecolor($new_width, $new_height); 
    $image = $imagecreate($filepath); //photo folder 

    imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $filewidth, $fileheight); 
    $imageformat($image_p, $filepath_thumb);//thumb folder 

问题：

<li class="column">
<div class="post-image">
<a href="http://localhost/example/products/40/">
<img src="http://localhost/example/static/products/thumbs/0446826001431411830.JPG" alt="my photo" /></a>
</div>

<div class="product-detail">
<h4 class="post-title">
<a href="/post/40/">Post title</a>
</h4>
</div>
</li>

我不知道会有多大的文件大小的图像，但它肯定是一个HD/DSLR图像。现在，上面的脚本生成了一个缩略图，其中包含图像的with=600px和height=ratio（例如600x400）

在我的布局中，我希望缩略图能够进行一些调整，这样我就不会扭曲或以任何方式拉伸。容纳缩略图的容器的宽度/高度为200 x 200 px

当缩略图在浏览器中呈现时，其尺寸将 600px×401px（缩放到200px×200px）每个图像的高度都是随机的

HTML:

<li class="column">
<div class="post-image">
<a href="http://localhost/example/products/40/">
<img src="http://localhost/example/static/products/thumbs/0446826001431411830.JPG" alt="my photo" /></a>
</div>

<div class="product-detail">
<h4 class="post-title">
<a href="/post/40/">Post title</a>
</h4>
</div>
</li>

---

要精确缩放到200x200px而无需特定的宽度x高度，解决方案是什么…

我认为实现所需的最简单的方法是使用背景图像

您必须将html更改为以下内容：

.post图像{
宽度：200px；
高度：200px；
背景重复：无重复；
背景位置：中心；
/*该尺寸确保其正确缩放以覆盖该区域*/
背景尺寸：封面；
}
.张贴图片a{
显示：块：
宽度：100%；
身高：100%；
}
.post-image img{
显示：无；
}

---

如果你不尊重比例，我不认为你的缩放图像不会失真。您可以裁剪图像或缩小图像，但最终会出现边带。 我会尝试找出图像是纵向的还是横向的，然后相应地应用css，使图像适合您的200x200帧（这是带边框的css示例）：

---

（我还没有测试css，您可能需要更正它）。

有一个非常好的解决方案！您需要为您的图像创建一个父容器，然后将带有

position:absolute

的图像放置在此容器内，如下所示：

<div class="imageParent">
    <img src="http://placehold.it/600x400" alt="" class="image--fitHeight" />
</div>

它将图像拉伸到最小宽度100%，并且由于容器具有

溢出：隐藏

，它将覆盖父容器内以

边距：自动

为中心的图像

它不会被改变/拉伸

如果您的图像的比率类似于16/9（因此宽度大于高度），请使用上述方法。反之亦然，使用而不是

min width:100%；高度：自动

您只需切换这两个：

宽度：自动；最小高度：100%

此方法与

background:cover

相同，但使用真实图像

---

感谢您的快速回复。我尝试了你的解决方案，但是缩略图的左上方区域是可见的，图像的其余部分被隐藏了：（截图@yaqoob如果可能的话，在网上放一个实际的例子（你甚至可以在这里这样做！）。看起来您没有隐藏真实的图像，或者css中有错误。@yaqoob我已将答案中的de代码转换为一个片段。请注意，它可以工作，但您必须删除css中的注释，因为我最初使用的是sass样式的注释。是否有可能不裁剪图像？尽管它现在作为片段对我有效…@yaqoob是的，请看我答案的最后一段。但是，你永远不会得到一个非方形的图像，以适合显示所有内容的方形框，并且不会使其变形：-）谢谢你的帮助：）

<div class="imageParent">
    <img src="http://placehold.it/600x400" alt="" class="image--fitHeight" />
</div>

.imageParent {
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.image--fitHeight {
    position: absolute;
    top: -500%;
    left: -500%;
    right: -500%;
    bottom: -500%;
    margin: auto;
    min-width: 100%;
    height: auto;
}