將響應視口中的圖像居中而不會丟失其寬高比

Question

我想要做的是在視口（或父元素）內部對圖像進行居中和調整大小，而不對其進行拉伸。爲了使一個很長的故事短小，我希望圖像保持其縱橫比並調整大小，以便完全覆蓋視口。

這是我的HTML佈局：

<div class="media-area" data-size="b" data-type="2"> 
    <ul class="content-slider"> 
     <li class="cs-item"> 
      <img class="cs-background" src="assets/img/backgrounds/top-slider-1.jpg" alt="slider-element"> 
     </li> 
     <li class="cs-item"> 
      <img class="cs-background" src="assets/img/backgrounds/top-slider-2.jpg" alt="slider-element"> 
     </li> 
     <li class="cs-item"> 
      <img class="cs-background" src="assets/img/backgrounds/top-slider-3.jpg" alt="slider-element"> 
     </li> 
    </ul> 
</div> 

這是我的CSS：

.media-area { 
    width: 100%; 
    height: 100%; /* Standard height */ 
    position: relative; 
    overflow: hidden; 
} 

.media-area .content-slider { 
    position: relative; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 

.media-area .content-slider .cs-item { 
    position: relative; 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 

.media-area .content-slider .cs-item img { 
    display: block; 
} 

.media-area .content-slider .cs-background { 
    -webkit-transition: all .1s ease-in-out; 
    -moz-transition: all .1s ease-in-out; 
    -o-transition: all .1s ease-in-out; 
    transition: all .1s ease-in-out; 
} 

這是我的JS：

function mediazone() { 
var defaults = { 
    elem: ".media-area", 
    elemWrap: ".media-area .content-slider", 
    elemSlide: ".media-area .content-slider .cs-item", 
    vh: $(window).height(), 
    vw: $(window).width() 
}; 

$(defaults.elemSlide).find(".cs-background").each(function() { 

    var bkndImgW = $(this).width(); // Current image width 
    var bkndImgH = $(this).height(); // Current image height 

    var mediaViewPortW = $(this).parents(defaults.elem).width(); // Current media viewport width 
    var mediaViewPortH = $(this).parents(defaults.elem).height(); // Current media viewport height 

    // Used for viewport aspect ratio 
    var viewportratio = Math.round((mediaViewPortW/mediaViewPortH) * 100000)/100000; 

    // Used for image aspect ratio 
    var imageratio = Math.round((bkndImgW/bkndImgH) * 100000)/100000; 

    // Negative margins for when the height is larger than the width 
    var bkndImgPosW = ((bkndImgW - mediaViewPortW)/2)*-1; 

    // Negative margins for when the width is larger than the height 
    var bkndImgPosH = ((bkndImgH - mediaViewPortH)/2)*-1; 

    bkndImgPosW = Math.min(0, Math.max(bkndImgPosW, bkndImgPosW)); 
    bkndImgPosH = Math.min(0, Math.max(bkndImgPosH, bkndImgPosH)); 

    if (viewportratio > imageratio) {    

     $(this).removeAttr("style"); 
     $(this).css("min-height", "100%"); 
     $(this).css("width", "100%"); 
     $(this).css("margin", bkndImgPosH+"px 0px"); 
    } else if (viewportratio < imageratio){ 

     $(this).removeAttr("style"); 
     $(this).css("height", "100%"); 
     $(this).css("min-width", "100%"); 
     $(this).css("margin", "0px "+bkndImgPosW+"px"); 
    } else if (viewportratio == imageratio) { 
     $(this).removeAttr("style"); 
    } 
}); 
} 

的功能在這裏初始化：

$(document).ready(function() { 
    mediazone(); 
}); 
$(window).resize(function() { 
    mediazone(); 
    console.log('window resize event'); 
}); 

我現在面臨的問題是，當頁面加載時，圖像是視口的一半，但是當我調整瀏覽器窗口大小時，它完全適合。

另一個我現在無法找到解決方法的問題是兩個縱橫比相等的問題（我無法找到一種方法使圖像覆蓋屏幕而不必處理一些空白區域）。當前述場景正在進行時，這會使圖像閃爍。

在DOM中使用IMG標記很重要，否則可能會有一種方法可以使用CSS中的「background-image」屬性。

任何人都可以指出我失蹤/做錯了/我應該刪除？

親切的問候，

亞歷

*後來編輯*

這就是我現在所擁有的：

http://jsfiddle.net/LexEckhart/Z5cjx/

調整大小後，它似乎工作正常，並保持中間的圖像平衡，但當頁面加載時，項目沒有正確定位。

Answer 1

您可以利用百分比填充總是從元素寬度中計算出來的優勢。因此，您可以使用具有百分比寬度的垂直填充來強制縱橫比。

<div id=img></div> 

// ... then in CSS: 

#img { 
    background: url("http://placekitten.com/1280/720") no-repeat center center; 
    background-size: cover; 
    height: 0; 
    padding-bottom: 56.25%; /* 9:16, or 720/1280 */ 
} 

Here is a jsfiddle to demonstrate.如果你不事先知道寬高比，當然你也可以計算它，並設置了「填充底」動態通過JavaScript。

感謝歸因於此技術的inimitable Dave Rupert。

編輯啊，該末尾段落中的<img>標記被隱藏。您可以使用這一招的變化，如果你真的需要一個<img>標籤：

<div class=image-centerer> 
    <img src='http://whatever.com/your/image.png'> 
</div> 

// ... then in CSS: 

.image-centerer { 
    position: relative; 
    height: 0; 
    padding-bottom: 56.25%; 
} 
.image-centerer img { 
    position: absolute; 
    display: block; 
    height: 100%; 
} 

Fiddle demo和here is one demonstrating the handling of arbitrarily-proportioned images.

Answer 2

你可以給嘗試

「背景大小」和「對齊項「來自css3的屬性。

設置「background-size：100％100％;」;它會覆蓋（父窗口）;

爲了對齊中心的內容，你可以使用「align-items：center」。

Answer 3

由於OP明確表示他不想使用背景圖像，因爲圖像必須作爲圖像存在於DOM中，因此下面是一個顯示解決方案的jsfiddle。我使用不透明度將圖像變暗以顯示它下面的li的邊界。我認爲OP是在解決這個問題。無論如何，希望這有助於。

jsfiddle

if (viewportratio > imageratio) {    
     $(this).removeAttr("style"); 
     $(this).css("width", "100%"); 
     $(this).css("margin", bkndImgPosH+"px 0px"); 
    } else if (viewportratio < imageratio){ 
     $(this).removeAttr("style"); 
     $(this).css("height", "100%"); 
     $(this).css("margin", "0px "+bkndImgPosW+"px"); 
    } else if (viewportratio == imageratio) { 
     $(this).removeAttr("style"); 
    } 

請注意，圖像保持它們的縱橫比如果只提供一個屬性/特性（寬度或高度）。這是解決方案的關鍵。

編輯：更新小提琴。我玩弄了數學邏輯，直到它適用於我的圖像，替換了我之前使用過的圖像。第一部分下面的數學邏輯可能是錯誤的，所以它需要進一步的測試，但這適用於我所擁有的。