Facebook图像调整大小而不会失去其比例

Question

我试图了解facebook如何制作图像而不会失去它的比例，但仍使用标准图像尺寸。

有什么想法吗？

这基本上就是我想做的事情：

编辑：

让我们说我们有16：9的图像，我希望它适合一个正方形让我说200x200px，图像会拉伸，我不想要那个..我想要调整图像大小以适应200x200px但“切片”它并显示图像的一部分。

拉伸示例：http://img.movavi.com/how-to/ar3/01.jpg

更正的示例：http://img.movavi.com/how-to/ar3/02.jpg

由于

Answer 1

我认为你所追求的是使用'overflow：hidden'在包装器div中的图像。

使用前面提供的图片查看此示例： http://jsfiddle.net/92R4H/9/

.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 :) */

基本上，您可以缩小图像以符合父div。溢出：隐藏的规格将导致一些裁剪，如果你的图像正在改变比例，即16：9到4：3没有拉伸。