调整图像大小以匹配相框的宽度和高度答案

【问题标题】：Resizing Images To Match Photo Frame width and height调整图像大小以匹配相框的宽度和高度
【发布时间】：2015-10-13 10:17:20
【问题描述】：

我正在开发一个包含两种图像的网站

人像照片

风景照片

如你所见，我有两种类型：

正方形
矩形

我必须调整此页面中所有照片的大小：

http://freche.epartenaire.com/materiel-de-location-21_%C3%89l%C3%A9vation_Travaux-en-hauteur_NACELLE-PL.php

正方形和长方形适合这里的正方形

如果图像是正方形或矩形，则播种它并不重要，它必须适合正方形

你能给我一些建议（插件或技术）

我正在使用 php jquery javascript

感谢每一个建议

【问题讨论】：

您可以从 css 中设置定义的高度和宽度
让我们假设他不希望在他的网站上显示未优化的 2Mb 图片。
制作一个与height 和width 相同的div 将图像放在里面设置width: 100%。告诉你的div 是overflow:hidden; 然后它们看起来都一样的形状和大小，漂亮整洁:)
老实说，不成比例的图像真的很难看，看起来不专业。我宁愿保持它们原样，并将它们集中在稍暗的背景颜色上（以将它们与网站背景颜色分开）并使用真实的缩略图而不是仅仅使用 css 解决方案。

标签： javascript php jquery html css

【解决方案1】：

您可以使用 PHP 来执行此操作。

有两个库可以跳出来，Imagick 或 GD。

还有包装 Imagick 的其他库，例如：

http://image.intervention.io/

如果您还没有 Imagick，您可以先在您的服务器上安装它。（先查看phpinfo）

使用包管理器：

sudo apt-get install php5-imagick

安装后，您可以很容易地对图像进行缩略图：

http://php.net/manual/en/imagick.cropthumbnailimage.php

示例代码如下：

<?php
/* Read the image */
$im = new imagick( "test.png" );
/* create the thumbnail */
$im->cropThumbnailImage( 80, 80 );
/* Write to a file */
$im->writeImage( "th_80x80_test.png" );
?>

不过，就我个人而言，我可能会忽略所有这些，而直接跳入为您提供此功能的 SaaS。

例如：http://cloudinary.com/ 提供动态调整图像大小。

使用它们，您可以非常轻松地调整图像大小，只需传递原始图像，然后传递您想要返回的尺寸。

【讨论】：

【解决方案2】：

你可以这样做：

div{
  width: 250px;
  height: 250px;
}
img{
  width: 100%;
  height: 100%;
}

但是前面的代码会导致图片被拉伸。因此，您可以使用背景图像代替图像元素。你可以使用background-size: cover;background-position: center;

但是如果你想使用图像元素而不是背景图像，有很多插件。我非常喜欢下面的插件。

https://github.com/levymetal/jquery-resize-image-to-parent

$('.my-image').resizeToParent();

【讨论】：

【解决方案3】：

div {
    width: 100px;
    height: 100px;
    overflow: hidden;
}

img {
    width: 100%;
    height: auto;
}

这样就可以了。

【讨论】：

【解决方案4】：

您可以使用 CSS (CSS3) 来执行此操作。

将其用作背景图像：

.img {
 background-image: url(path/to/your/ima.ge);
 background-size: cover;
}

【讨论】：

【解决方案5】：

你可以根据你想要的大小创建一个css。

一个例子可以在这里看到https://jsfiddle.net/mahima154/x7ejqmeh/

img { 
//give the width and height attributes here
}

【讨论】：