2014-04-23 99 views
0

我正在使用Facebook API從Facebook頁面中提取6張照片並在div內顯示它們。我希望無論照片的大小如何,包含的div都是正方形的,但是我希望裁剪圖像取決於照片的方向。根據方向裁剪圖像?

例如,如果圖片是以縱向模式拍攝的,我希望div中圖像的寬度與div的寬度相同,並按比例縮放高度(在div中垂直居中圖像)。

如果圖像拍攝於橫向模式,我想縮放圖像,使得高度等於div的高度和寬度按比例縮放(在div內水平居中)。

我假定這將需要一些JavaScript,以最好的方式有什麼建議來解決這個?

謝謝!

回答

2

可以使用圖像作爲背景圖片做一些整齊:

CSS的部分是:

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

現在,您可以設置使用Javascript背景圖片:

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

不幸的是,你對IE8和更低的運氣不太好。告訴我你是否需要替代解決方案。

+0

我認爲這個解決方案將起作用。我的目標受衆是15-30歲,所以我會假設他們中的大多數人不會使用IE8:P感謝您的建議! – APAD1