将图像添加到固定大小的容器而不更改尺寸

Question

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

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

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

编辑 **

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

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

Answer 1

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

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

Answer 2

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

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=""/>';
}

Answer 3

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

无论哪种方式，您都可以通过多种方式做到这一点。首先，您可以将width 属性添加到您的img。

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