根据方向裁剪图像

Cropping an image depending on the orientation?

本文关键字：图像 裁剪 方向      更新时间：2023-09-26

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

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

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

我认为这将需要一些Javascript，有什么建议可以解决这个问题的最佳方法吗？

谢谢！

使用图像作为背景图像可以做一些巧妙的事情：

CSS部分是：

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

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

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

不幸的是，你在IE8及更低版本上运气不佳。如果您需要其他解决方案，请告诉我。

相关文章：