保持高寬比的響應式背景

Question

我使用Malsup的Cycle 2創建背景幻燈片，並在單獨的div中顯示相應的滑動文本。我在這裏有一些簡單的標記，但似乎無法讓圖像進行裁剪，以至於它始終是瀏覽器高度的100％（如果您製作一個薄窗口，您將在底部看到紅色）。

也許解決方案是jQuery或CSS - 我看到的一切建議使用height:auto對圖像和父div，無濟於事。

jsfiddle

<div id="background" class="cycle-slideshow" 
        data-cycle-fx="scrollHorz" 
        data-cycle-timeout="2000" 
        data-cycle-slides="> div" 
> 
    <div style="background:#fcc"> 
     <img src="http://stoptraining.me/staged/IMG_1402.jpg"> 
    </div> 
    <div style="background:#cfc"> 
     <img src="http://stoptraining.me/staged/IMG_1403.jpg"> 
    </div> 
</div> 

<div class="center"> 
    <div id="text" class="cycle-slideshow" 
        data-cycle-fx="fade" 
        data-cycle-timeout="2000" 
        data-cycle-slides="> div" 
    > 
     <div> 
      <h2>Title</h2> 
      <p>Lorem ipsum dolor ...</p> 
     </div> 
     <div> 
      <p>Mel eu pertinax ... 
     </div> 
     <div> 
      <p>Utinam electram pertinacia ... 
     </div> 
    </div> 
</div> 

CSS：

body, html { 
    background: red; 
    padding: 0; 
    margin: 0; 
    height: auto; 
    width: 100%; 
} 
#background { 
    position: fixed; 
    width: 100%; 
    height: auto; 
    z-index: 99; 
    overflow: hidden; 
} 
#background div { 
    width: 100%; 
    height: auto; 
    background-size: cover; 
    overflow: hidden; 
} 
#background div img { 
} 
img { 
    width: 100%; 
    height: auto; 
} 
#text { 
    position: relative; 
    text-align: center; 
    z-index: 99; 
} 
.center { 
    background: white; 
    padding: 200px 0 0 0; 
    width: 400px; 
    overflow: auto; 
    min-height: 1000px; 
    margin: auto; 
    z-index: 9999; 
    position: relative; 
    text-align: center; 
} 

Answer 1

目前沒有CSS樣式，這將有助於任何元件保持在此基礎上側是大高寬比;因此，你將不得不求助於使用JavaScript。

這是一個工作jsFiddle，它完成了你想要的東西。

---

上述解決方案包含了從原始的一些修改...

CSS：

刪除：

#background div img { 
} 
img{ 
    width: 100%; 
    height: auto; 
} 

變化：

#background { 
    /* ... */ 
    /* make sure width and height are 100%! */ 
    width: 100%; 
    height: 100%; 
    /* ... */ 
} 
#background div { 
    /* ... */ 
    /* make sure width and height are 100%! */ 
    width: 100%; 
    height: 100%; 
    /* ... */ 
} 

地址：

#background div img.wider { 
    width: 100%; 
    height: auto; 
} 
#background div img.higher { 
    width: auto; 
    height: 100%; 
} 

的JavaScript：

var imgWidth = 1600; 
var imgHeight = 1067; 
var imgRatio = imgWidth/imgHeight; 

$(ResizeBackground); // call on initialize 
$(window).resize(ResizeBackground); // and on resize 

function ResizeBackground() { 
    var div = $('#background'); 
    var divWidth = div.width(); 
    var divHeight = div.height(); 

    // if the div's ratio is higher than the image, it means that 
    // the div is wider than the image (and the background will be seen on the sides). 
    // Else, the div is higher and will display the background on the bottom. 

    // this condition will change the images proportion to always fill the background. 
    if (divWidth/divHeight > imgRatio) { 
     div.find('img').removeClass('higher').addClass('wider'); 
    } else { 
     div.find('img').removeClass('wider').addClass('higher'); 
    } 
} 

---

更新

爲中心的圖像而讓他們按比例大小，您必須使用以下的計算：

var $imgs = div.find('img'); 

if (divRatio > imgRatio) { 
    $imgs.each(function() { 
     var $this = $(this); 
     // set a negative top margin (and move the image up) 
     $this.css('margin-top', -Math.abs(div.height() - $this.outerHeight())/2); 
    }); 
} else { 
    $imgs.each(function() { 
     var $this = $(this); 
     // set a negative left margin (and move the image to the left) 
     $this.css('margin-left', -Math.abs(div.width() - $this.outerWidth())/2); 
    }); 
} 

我稍微更新jsFiddle，請看一看，看看標有// NEW!!從the old one的差異。