0

I want to do the same thing as you can see at youassist.org.

Look at the image in the slide show, and try to resize the browser window*. You can see two "behaviors" on the displaying of the image:

  1. with larger window the image will gradually zoom in;
  2. with smaller window** the image doesn't zoom out but it scroll horizontally.

I'm trying to do that. This is what I've got so far, but it only works if I resize from a big window to a smaller window, but not vice versa.

Here is a fiddle:

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;
}

Script:

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");
    }
});

*: resize the window gradually and don't go beyond the point where the site reorganizes itself as responsive site for mobile. I'm not interesting in that!

**: "smaller window" isn't correct, I think this behaviour occurs when the image size is smaller than the window size

4

2 回答 2

1

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

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

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

希望这可以帮助！

于 2013-06-05T22:57:17.083 回答
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/（带有内容元素）
于 2013-06-06T08:20:45.510 回答