根据方向裁剪图像？

Question

我正在使用Facebook API从Facebook页面中提取6张照片并在div中显示它们。无论照片的大小如何，我都希望包含div为正方形，但我希望图像的裁剪取决于照片的方向。

例如，如果图片是以肖像模式拍摄的，我希望div中图像的宽度与div的宽度相同，并按比例缩放高度（将图像垂直居中于div内）

如果图像是以横向模式拍摄的，我想缩放图像，使高度等于div的高度，宽度按比例缩放（在div中水平居中）。

我假设这将需要一些Javascript，有关解决此问题的最佳方法的任何建议吗？

谢谢！

Answer 1

您可以使用图像作为背景图像做一些整洁的事情：

CSS部分将是：

.photo-square {
    background: no-repeat 50%;
    background-size: cover;
}

现在您可以使用Javascript设置背景图片：

<div class="photo-square" style="background-image: url(...);"></div>

不幸的是，你对IE8的运气不好而且更低。如果您需要替代解决方案，请告诉我。