如何始终以正方形显示图像答案

【问题标题】：How to show image always in a square如何始终以正方形显示图像
【发布时间】：2016-06-30 02:06:18
【问题描述】：

我想在固定尺寸为 400 * 400 的正方形内显示图像。因此，为了保持纵横比，如果宽度更大，那么宽度会减小，并且根据纵横比的剩余空间将是填充了一些背景颜色（我可以在 div 上提供颜色）。同样，如果高度更大，则会根据纵横比调整高度以显示它，然后剩余空间将被背景填充。

谁能帮助我如何实现这一目标？这可以用imagemagick完成吗？ http://php.net/manual/en/book.imagick.php

任何帮助将不胜感激。

【问题讨论】：

您是否尝试过搜索图像裁剪/调整大小教程/代码/博客/文档？
是的，但找不到哪个可以帮助我。
这只是一个简单的数学问题，如果您在编写代码时不熟悉数学，我建议您寻找可以解决您问题的图像处理库或裁剪库。
如果宽度大于高度，则宽度为 100%，反之则高度为 100%，溢出隐藏
有人遇到了同样的问题，但先用谷歌搜索了一下：stackoverflow.com/questions/6460578/best-php-image-crop-class

标签： php html css image

【解决方案1】：

使用 phpthumb。

    require_once '/path/to/ThumbLib.inc.php';  
    $thumb = PhpThumbFactory::create('path/to/image.jpg');  

    //$thumb->resize(400, 400);  
    // resize image and make thumbnail by cropping image automatically
    $thumb->adaptiveResize(400, 400)->save('/path/to/thumb.jpg'); ;

更多阅读请转到PHPTHUMB

【讨论】：

【解决方案2】：

尝试添加宽度和高度再次，您可以在 css 中执行此操作：D

【讨论】：

【解决方案3】：

如果以合适的尺寸显示图像就足够了，您不需要创建缩放版本，只需在网页中使用 CSS 对其进行缩放：

div {
  width:400px;
  height:400px;
  background:url('https://placekitten.com/400/600');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:50% 50%
}

改变 placekitten 图像的大小以查看图像的缩放方式。

在 jsFiddle 上玩一个例子：https://jsfiddle.net/Lontevb3/1/

【讨论】：

【解决方案4】：

你

计算图像的纵横比
检查其中一个图像尺寸是否比您的“框架”长
如果两者都较长，则选择两者中最大的尺寸
缩放图片，使最长尺寸与您的框架相同（400px）
缩放另一个维度，使其为 400*纵横比 px

【讨论】：

【解决方案5】：

创建一个<div> 并设置背景图片怎么样？

【讨论】：

你好。你应该解释一下这将如何解决问题？
@Jubobs：这是对答案的尝试。这可能不是一个好的答案，但它是一种尝试。
@Makoto 这只是一个建议。对答案的诚实尝试至少会涉及一个展示该想法的玩具示例。不够好。