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

Question

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

我怎样才能将图像(不是背景图像)添加到容器中并在不改变其中心比例的情况下显示图像(因此，如果图像为 800x600)，它将显示同一图像的中心 200x200？我不介意使用 PHP、jQuery 或一些 CSS 魔术来完成这项工作。

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

编辑 **

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

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

Answer 1

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

如果它不能帮助从 jquery 制作它。这是一个使工作真正出色的工具:http://imgscale.kjmeath.com/