0

我有一个固定容器（200x200px），我希望在其中加载我的图像。每个图像都有不同的大小，目前我必须将图像大小调整为容器宽度，或者图像失去比例。

如何将图像（不是背景图像）添加到容器并显示图像而不改变其可能在中心的比例（因此，如果图像是 800x600），它将显示同一图像的中心中间 200x200？我不介意使用 PHP 或 jQuery 或一些 CSS 魔法来完成这项工作。

我真的不知道如何开始，所以我希望有人可以协助程序或垫脚石如何做到这一点？

编辑 **

我可能没有正确解释。所有图像都大于分配给它的 200x200 区域，调整大小的问题是，一旦用户单击图像，它需要在灯箱中加载相同的图像，关键区别在于它加载相同的图像。因此，我想在不影响图像比例的情况下强制使用“缩略图”视图。由于有些图像是水平的，有些是垂直的，我想我宁愿以 200x200 显示图像的“中心”或任何角落，并让用户单击图像以查看完整图片。我正在寻找的是一种几乎使图像“行为”的方式与背景图像相同，但不是背景图像？这有意义吗？有什么可以提供帮助的吗？

** 示例图像 ** 这是一个示例图像来说明我的想法：http ://tinypic.com/view.php?pic=21caxc1&s=6

4

3 回答 3

0

您应该从页面速度的角度调整图像大小。用户下载 800x600 的图像并通过浏览器将其缩小到 200 像素宽是一种浪费。

无论哪种方式，有几种方法可以做到这一点。首先，您可以将width属性添加到您的img.

或者，看看使用 CSS：.img{ max-width: 200px;

于 2013-02-21T15:19:09.533 回答
0

您可以检查图像的宽度，如果宽度大于高度，则减小图像的宽度，而不是从高度减小以填充容器，如下所示：

list($width, $height) = getimagesize("image_name.jpg");
if ($width>$height){
   echo'<img src="image_name.jpg" style="width:200px;" alt=""/>';
}
else{
   echo'<img src="image_name.jpg" style="height:200px;" alt=""/>';
}
于 2013-02-21T15:20:25.790 回答
0

或者尝试基于 css 的解决方案。为您的图像提供类属性，例如.resizedimg{width:90%}. 这 90% 是相对于容器宽度而不是原始图像宽度。

如果它不能帮助从 jquery 制作它。这是一个使工作变得非常好的工具：http: //imgscale.kjmeath.com/

于 2013-02-21T15:23:28.693 回答