如何显示浏览器全宽的图片？

Question

使用

制作的JQUERY MOBILE

我希望在网站上显示全宽的图片，使它们看起来像选项，如下所示：

|[      PICTURE       ]|  <- Browsers Max Width
|[      PICTURE       ]|

以下是一个例子：

我已经尝试了几周这样做，我试图做style="width:100%"然而，当我这样做时，两者之间有一个巨大的空白：

|  [    PICTURE     ]  |  <- Browsers Max Width

所以我试过这个，它有效!!!

style="position: absolute; left:0px; width: 100%;"

但问题是，每当我想把下一张图片放在下面时，它就会变成同一张图片＃1，所以它们在同一个地方，所以你无法分辨它在哪里。

|[   PICTURE 1 & 2    ]|  <- Browsers Max Width

我如何努力使它们一个接一个地看？

Answer 1

这是因为position: absolute; 不要将它们定位到绝对位置，而是尝试以下css

body {
margin: 0px;
padding: 0px;
}

并将此css添加到您的图片中：

style="width: 100%; margin: 0px;"

Answer 2

使用jQuery你可以尝试这个：

$('img').css({
  'min-width', screen.width /* screen width!*/
});

Answer 3

重叠的原因是position: absolute。每当你绝对定位某些东西时，它会将该元素从堆栈中取出（其余元素忽略它就在那里）。你需要删除它。

试试这个css（我先从这里开始）：

width: 100%;

或者您可以尝试使用jQuery / javascript分配动态宽度：

$(window).bind('resize', function() {
    onWindowResize();
}

function onWindowResize() {
    var windowWidth = window.innerWidth;
    $('image').css('width', windowWidth); 
}

您需要使用某种类型的挂钩（类名或ID或其他内容）更新“图像”，否则会将其自身附加到所有图像。