強制響應圖片庫是高度的它的父

我這裏有一個jasfiddle：http://jsfiddle.net/g79a2jw7/11/強制響應圖片庫是高度的它的父

設置：

非常基本的圖片庫設置，高興這個基本功能
用途內嵌塊網格，如純網格，因爲這是網站使用的內容
將圖庫圖像作爲內聯背景樣式插入，然後圖像被隱藏

這使得CSS圖像尺寸/裁剪這樣的響應佈局內的控制：

.gallery-item { 
    background-position: 50% 50%; 
    background-repeat:no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

問題我試圖解決：

需要在.gallery高度& .gallery-item divs確認父母的高度.hero div，所以畫廊高度總是與右側的英雄文本相匹配。 CSS的background-size: cover;屬性應該照顧居中的圖像的裁剪一旦高度排序
這時需要的上/下一個按鈕，根據畫廊
的高度來計算其垂直居中需要的畫廊是在正常流動在移動所以它推動它下面的文本
快樂去一個完全不同的方法，如果它允許所有居中的圖像裁剪等
需要IE 9支持

來源

2014-10-19 CMSCSS

這很容易使用jQuery：如果.hero div是我父母，你可以使用父母（） - 否則，你可以使用父母（）與選擇器

$('.gallery, .gallery-item').each(function(){ 
    var parent_height = $(this).parents('.hero').height(); 
    $(this).height(parent_height); 
});

來源

2014-10-19 19:45:30

對於那些瞭解jQuery，你是對的，更容易 - 謝謝堆！最後一件事情，如果你有時間，我該如何修復全屏模式 - 點擊這個小提琴的右上角：http://jsfiddle.net/g79a2jw7/13/我通過讓jQuery添加一個全屏模式來添加一個'''''畫廊 - 縮放''''的類。那麼，如果''''.gallery'''擁有''''.gallery-zoomed'''類，那麼最簡單的方法是讓jQuery不執行？另外，有沒有辦法讓按鈕垂直居中根據圖像的高度？ – CMSCSS 2014-10-20 19:37:49

強制響應圖片庫是高度的它的父

回答

相關問題