Javascript 在不丢失其比率的情况下调整Facebook图像大小

我试图了解facebook是如何在不丢失图像比例的情况下制作图像的，但仍然使用标准图像大小

你知道吗

这就是我想要做的：

编辑：

假设我们有16:9的图像，我希望它适合一个正方形，比如说200x200px，图像会拉伸，我不希望那样。。我希望图像的大小调整到适合200x200px，但“切片”它并显示图像的一部分

示例：

更正的示例：

---

谢谢

我想你想要的是包装器div中使用“overflow:hidden”的图像

请查看此示例，它与前面提供的图像一起使用：

---

基本上，您可以缩小图像以符合父div。如果您的图像正在改变比率（即16:9到4:3），溢出：隐藏规格将导致一些剪辑，而不进行拉伸。

Hi mate，您可能需要添加一个文字说明，说明您到底想做什么。图像有点模糊，给误解留下了空间。我想…你可能想做什么，像一个带溢出的包装div：隐藏，然后将图像宽度/高度设置为最大宽度：100%；最大高度：100%；分别地否则，你可以使用php的getimagesize（）计算出它的纵向还是横向，然后相应地计算出精确的缩放尺寸（溢出：隐藏以裁剪过量）。当你在Facebook上查看相册时，图像是206x206，但它们仍然保持比例，例如，我想要的是一个宽屏图像，当大小调整到206x206时，不要拉伸并保持纵横比。你在问什么？我建议你尝试编码，然后带着你的代码回来，人们就会帮助你。对不起，我不能在这里打开图像，因为你的示例图像是（o）…我编辑了这篇文章，并对我想做的事情做了更详细的解释..这是可行的，但我也希望垂直的图像不会受到影响../我不知道如何恰当地做到这一点：/最好的方法是调整图片的大小（我可以通过php实现），然后以某种方式将图像发送到带有溢出隐藏的div中。我过去实现这一点的方法是在php中使用getimagesize（）找出哪个更大（宽度或高度），然后对每个图像使用if语句。然后，我使用该计算的结果来计算溢出量将减少多少：隐藏，我将该量减半，并将其应用于负边距（因此，如果它是一幅肖像图像，我将缩放到宽度，然后使用边距顶部：-[无论它计算多少以将其带到中心].我不确定这是否是最佳做法，但这是我过去的工作方式。谢谢，伙计！我会尝试一下的！：）

.clipped-sml { width:200px; height:100px; overflow:hidden; }
.clipped-sml img { width:auto; height:100%; float:right; }

/* Pls note: the float:right is only there to show the corrected image is scaling correctly :) */