貓頭鷹旋轉木馬爲不同大小的圖像？

I have seen this demo for images 貓頭鷹旋轉木馬爲不同大小的圖像？

我有要求貓頭鷹傳送帶必須總是相同的寬度和高度。例如。必須符合給定的邊界。

中的圖片應該使用background-size: contain使他們適合。所以我擔心我不能直接使用img標籤。

下一張照片必須緊挨着下一張，中間沒有空白。

例如應該是這樣的：

所以所示的畫面的量是未知的，因爲根據圖像

的比例和寬度是有辦法與貓頭鷹轉盤要這樣做嗎？

來源

2015-12-07 Toskan

儘管這是一個老問題，我有同樣的問題。這是我的解決方案：

jQuery(document).ready(function($) { 
    $(".owl-carousel").each(function(index, el) { 
    var containerHeight = $(el).height(); 
    $(el).find("img").each(function(index, img) { 
     var w = $(img).prop('naturalWidth'); 
     var h = $(img).prop('naturalHeight'); 
     $(img).css({ 
     'width': Math.round(containerHeight * w/h) + 'px', 
     'height': containerHeight + 'px' 
     }); 
    }), 
    $(el).owlCarousel({ 
     autoWidth: true 
    }); 
    }); 
});

它調整大小的圖像在轉盤，以適應所需的高度爲圓盤傳送帶容器（紀念縱橫比）設定。在的jsfiddle

完整例如：http://jsfiddle.net/yzLqv3qk/

來源

2017-04-23 13:52:43

很好的解決方案中，我使用的更復雜的服務器端解決方案，這（其中寬度和比從服務器傳來，這比醜陋很多這個。 – Toskan

這實際上就像一個魅力，但我必須刷新兩次，以確定尺寸。我需要做些什麼才能使它調整圖像大小並在第一次渲染時顯示它們？ – Nifled

你可以設置容器無論大小，你需要它，併爲每個圖像下面的設置圖片爲背景的CSS：

.item.item1{ 
    background: url(images/slide1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

} 

.item.item2{ 
    background: url(images/slide2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

}

這將保持圖像的大小相同，但它會根據需要裁剪它們以適合您預先定義的尺寸。這種方法的缺點是你必須在CSS中定義圖像，而不是HTML - 但我之前在OWL滑塊上使用了這種方法。

來源

2015-12-07 22:47:30 Korgrue

良好，但背景尺寸含有是必須 – Toskan

我最近遇到了一個與貓頭鷹旋轉木馬相似的問題。單輪播中有三個不同的圖像寬高比工作，你可以在這裏申請相同的邏輯......

首先，我做外貓頭鷹容器視口的流體寬度：

#owl-container { 
width:50%; 
height:100%; 
position:relative; 
}

遂作出上述貓頭鷹項IMG適合此：

#owl-carousel .item img { 
display:block; 
width:100%; 
height:100%; 
margin:0 
}

給每個單獨的圖像縱橫比的獨特流體寬度，以上並配入使你能夠每個高度相匹配（與位來回計算正確的皮爾斯之前ntages）：

.landscape { 
width:100%; 
} 

.portrait { 
width:25%; 
} 

.square { 
width:50% 
}

離開每個幻燈片的HTML看起來像這樣：

<div class="item landscape"><img src="../xyz.jpg" alt="xyz"></div> 
<div class="item portrait"><img src="../xyz.jpg" alt="xyz"></div> 
<div class="item square"><img src="../xyz.jpg" alt="xyz"></div>

來源

2015-12-14 16:59:39

貓頭鷹旋轉木馬爲不同大小的圖像？

回答

相關問題