我想做同样的事情,你可以在youassist.org看到。
查看幻灯片中的图像,并尝试调整浏览器窗口的大小*。您可以在显示图像时看到两个“行为”:
我正在努力做到这一点。这是我到目前为止所做的,但它只有在我从一个大窗口调整到一个较小的窗口时才有效,但反之亦然。
这是一个小提琴:
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");
}
});
*:逐渐调整窗口大小,并且不要超出网站重新组织自身的位置作为移动设备的响应式网站。我对此并不感兴趣!
**:“小窗口”不正确,我认为当图像大小小于窗口大小时会出现这种情况
答案 0 :(得分:1)
一种方法是使用简单的CSS。看看这个:http://jsfiddle.net/panchroma/XBuGc/
我删除了所有的javascript并添加了一些CSS
.img-header{
width:100%;
height:auto;
min-width:450px; /* adjust as necessary */
}
希望这有帮助!
答案 1 :(得分: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: