jquery - 根据图像大小和窗口大小显示图像的不同方式

Question

我想做与您在 youassist.org 中看到的相同的事情.

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

1. 随着窗口的增大，图像会逐渐放大；
2. 使用较小的窗口**图像不会缩小，但会水平滚动。

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

这是一个 fiddle :

• > 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

看起来像是"new"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) 需要相对定位，内容需要绝对定位，顶部/右侧/底部/左侧为零。我也为此创建了一个 fiddle 版本。

JSFiddles:

1. > http://jsfiddle.net/dualed/gkBM5/ (基本)
2. > http://jsfiddle.net/dualed/gkBM5/1/ (带有内容元素)