讓 Bootstrap 輪播的內容占用一樣的高度

好難下標題啊!
竟然一時不知道標題應該要如何打才會比較吸引人,而且大家可以一眼就知道我這篇文章要說的東西是啥?

Bootstrap 一套由 Twitter 開發的前端框架,讓你的網站可以輕鬆的有 RWD 效果。
而且也支援一些常見的特效,其中一個就是很多業主很喜歡使用的 輪播效果。

原先我都是使用 Cycle 2 來達成輪播的效果,既然引入了 Bootstrap 而且他也有輪播特效,所以就輕鬆省事的使用他!不過應該說畢竟人家只是附屬的,功能面上當然比起 Cycle 2 還是略嫌不足。

他在輪播的時候,會有一個小小的缺點,如果輪播的內容不是一樣高的時候,那麼輪播區塊就會跟者一下高一下矮的,讓畫面跳來跳去的很不舒服。
不過既然是圖片的輪播,比較正常的作法應該是去叫上傳圖片的人,根據規格書上傳指定大小與比例的圖片才對,不過如果世界有這麼美好就真是太好了。所以只好想辦法自己將 高度固定下來。

因此找上這一篇文章 Normalize Twitter Bootstrap Carousel Slide Heights ,不過他的解法上有一個小小的問題,就是當圖片原本在顯示的時候就是被縮小的,那麼他會抓到原本的寬度與高度,而不是最後被縮小顯示的實際大小。
因此我將他的程式做了一點小小的修正,來克服圖片本身被縮小顯示後,還是可以正確的計算出所需要的高度。

$(function() {
	carouselNormalization();
});
function carouselNormalization() {
	var items = $('.carousel .carousel-inner .item'), heights = [], tallest, bwidth, height, width;
	if( items.length ) {
		function normalizeHeights() {
			bwidth = $('.carousel').width();
			items.each(function() {
				height = $(this).height();
				width = $(this).width();
				if( width > bwidth ) {
					height = height * ( bwidth / width );
				}
				heights.push(height);
			});
			tallest = Math.max.apply(null, heights);
			if( tallest > bwidth ) {
				tallest = bwidth;
			}
			items.each(function() {
				$(this).css('height', tallest + 'px');
			});
		};
		normalizeHeights();
		$(window).on('resize', function() {
			bwidth = $('.carousel').width();
			heights = [];
			items.each(function() {
				$(this).css('height', 'auto');
			});
			normalizeHeights();
		});
	}
}