根据方向裁剪图像？

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和更低的运气不太好。告诉我你是否需要替代解决方案。