Question

我有一个div #slideshow，图像的宽高比为2：1。所以，设置图像的高度我正在使用jQuery：

注意：幻灯片Div相对于浏览器窗口是100％宽。如果用户使浏览器窗口变小，那么它将变得更小。

slideWidth();

function slideWidth(){
var width = $("#slideshow").css("width");
var height = (parseInt(width.substr(0,width.length-2)) /3);
$("#slideshow").css("height",height+"px");
}

并且，为了动态地改变宽度，我使用setTimeout：

setInterval(slideWidth,1000);

这实际上是我想要的。但我认为通过每秒刷新一次slidewidth函数，我对网站的影响很大。

这可以通过CSS3实现吗？或者jQuery / JS的网站影响较小？

谢谢。随意以新的方式/想法发表评论。

Answer 1

使用伪元素和填充的css-only方法：

div {
    width: 100%;
    position: relative;
    background: red;
}

div:before {
    display: block;
    content: "";
    padding-top: 50%;
}

伪padding-top的组合可用于改变宽高比。

在这种情况下，50%填充等效于2:1的宽高比

Working Fiddle Example

Answer 2

你应该使用jquerys .resize（）;这会添加一个等待容器调整大小的事件侦听器。 EJ：

$(window).resize(function(){
  //do your logic here
});

Jquery resize

设置div相对于高度的宽度

2 个答案: