Question

我想做同样的事情，你可以在youassist.org看到。

查看幻灯片中的图像，并尝试调整浏览器窗口的大小*。您可以在显示图像时看到两个“行为”：

窗口越大，图像将逐渐放大;
窗口较小**图像不会缩小，但会水平滚动。

我正在努力做到这一点。这是我到目前为止所做的，但它只有在我从一个大窗口调整到一个较小的窗口时才有效，但反之亦然。

这是一个小提琴：

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

一种方法是使用简单的CSS。看看这个：http://jsfiddle.net/panchroma/XBuGc/

我删除了所有的javascript并添加了一些CSS

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

希望这有帮助！

Answer 2

它看起来像是“新”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：

http://jsfiddle.net/dualed/gkBM5/（基本）
http://jsfiddle.net/dualed/gkBM5/1/（包含内容元素）

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

2 个答案: