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

Question

我正在开发一个有两种图片的网站

• 人像照片

• 风景照片

就像你可以看到我有两种类型：

• 方

• 矩形

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

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

方形和矩形以适合这里的方块

播种如果图像是方形或矩形，那么它必须适合于squere

你可以给我一些建议（插件或技巧）

我正在使用php jquery javascript

我很感激每一条建议

Answer 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/动态调整图片大小。

使用它们，您可以通过传递原始图像，然后传回要返回的尺寸，轻松调整图像大小。

Answer 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();

Answer 3

return RedirectToAction("GetThreat");

这样做。

Answer 4

您可以使用CSS（CSS3）来执行此操作。

将其用作背景图像：

Proxy [P]
Proxy your requests

'^/test/proxy/(.*)$ http://nodejs.org/$1 [P]'

Answer 5

您可以根据自己的尺寸创建一个CSS。

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

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