Question

我正在创建一个包含2行和不同列数的全屏图层。无论你如何调整窗口大小，这个想法都是用图像填充div。

调整div的大小但不适用于图像： - （

我不想使用backgound-image：div中的封面，因为我想稍后将图片切换为视频。

有人对此有所了解吗？

这是我的代码：

$(document).ready(function() {

    var h = $( window ).height(); // returns height of browser viewport
    var w = $( window ).width(); // returns height of browser viewport

    var hproject = h/2 ;     
    var wcontstart = w - 25 ;  

    $("#menu-inhalt").css({ width: wcontstart , height: h });
    $("#bereiche li").animate({ height: hproject });
    $("img").css({ height: hproject });


});

/ * RESIZE * /

$( window ).resize(function() {

    var h = $( window ).height(); // returns height of browser viewport
    var w = $( window ).width(); // returns height of browser viewport

    var hproject = h/2 ;     
    var wcontstart = w - 25 ;  

    $("#menu-inhalt").css({ width: wcontstart , height: h });   

    $("#bereiche li").css({ height: hproject });    

    $("img").css({ height: hproject });

});

http://jsfiddle.net/hsBPp/1/

谢谢！

Answer 1

只需在你的CSS中添加这个类。图像将覆盖div的全宽。

#bereiche img{width:100%;}

在调整大小时保持图像覆盖div

1 个答案: