Question

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

如何将图像（非背景图像）添加到容器中，并且还可以在不改变其中心位置的情况下显示图像（因此，如果图像为800x600），它将显示同一图像的中间中间200x200？我不介意使用PHP或jQuery或一些CSS魔术来使这项工作。

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

编辑**

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

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

Answer 1

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

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

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

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

或尝试基于CSS的解决方案。为.resizedimg{width:90%}等图片提供类属性。这90％是相对于容器宽度而不是原始图像宽度。

如果没有帮助它来自jquery。这是一个使工作非常好的工具：http://imgscale.kjmeath.com/

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

3 个答案: