根據圖像大小和窗口大小顯示圖像的不同方法

Question

我想要做同樣的事情，您可以在youassist.org處看到。

看看幻燈片中的圖像，並嘗試調整瀏覽器窗口的大小*。你可以看到兩個「行爲」的圖像顯示：

1. 用較大的窗口圖像會逐漸放大;
2. 更小的窗口**圖像不會縮小，但會水平滾動。

我試圖做到這一點。這是迄今爲止我所知道的，但只有當我從一個大窗口調整到一個較小的窗口時，纔會起作用，但反之亦然。

這裏是一個小提琴：

• http://jsfiddle.net/z8RpZ/5/

HTML：

<div class="page-header-2"> 
    <img class="img-header" src="http://youassist.org/assets/home1.jpg" /> 
</div> 

CSS：

.page-header-2{ 
    height:350px; 
    overflow:hidden; 
    width:100%; 
    background:red; 
} 
.img-big{ 
    width: 100%; 
} 
.img-small{ 
    height: 100%; 
    max-width: none; 
} 

腳本：

var imgH = $(".page-header-2 img").height(); 
var divH = $(".page-header-2").height(); 

if(imgH <= divH){ 
    $(".page-header-2 img").addClass("img-small"); 
} else { 
    $(".page-header-2 img").addClass("img-big"); 
} 

$(window).resize(function() { 
    var imgH = $(".page-header-2 img").height(); 
    var divH = $(".page-header-2").height(); 

    if(imgH <= divH){ 
     $(".page-header-2 img").removeClass("img-big"); 
     $(".page-header-2 img").addClass("img-small"); 
    } else { 
     $(".page-header-2 img").removeClass("img-small"); 
     $(".page-header-2 img").addClass("img-big"); 
    } 
}); 

---

*：逐步調整窗口的大小，並且不超出所在部位重組本身作爲響應現場提供移動點。我並不感興趣！

**：「小窗口」是不正確的，我想，當圖像尺寸比窗口尺寸做到這一點

Answer 1

它看起來像一個「新」background-size規則的應用程序。你所做的不是將它放在圖像標籤中，而是將圖像放在容器的背景中，然後使用虛擬元素來設置高寬比。

<div class="img-header"> 
    <div class="aspect"></div> 
</div> 

.aspect { 
    padding-top: 50%; 
} 
.img-header { 
    background: url(url) center center/cover; 
    min-height: 200px; 
} 

因爲你很可能希望把裏面的內容也一樣，你需要絕對定位，否則虛設的元素（.aspect）將打破定位。爲此，容器（img-header）需要相對定位，並且內容需要絕對頂部/右側/底部/左側爲零。我也爲此創建了一個小提琴的版本。

JSFiddles：

1. http://jsfiddle.net/dualed/gkBM5/（基本）
2. http://jsfiddle.net/dualed/gkBM5/1/（與內容元素）

Answer 2

一種方法是用簡單的CSS出現這種情況。檢查了這一點：http://jsfiddle.net/panchroma/XBuGc/

我刪除了所有您的JavaScript並添加了一些CSS

.img-header{ 
width:100%; 
height:auto; 
min-width:450px; /* adjust as necessary */ 
} 

希望這有助於！