根据图像大小和窗口大小显示图像的不同方法

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 */ 
} 

希望这有助于！