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

【问题标题】：How to display a picture with a full width of the browser?如何以浏览器的全宽显示图片？
【发布时间】：2017-01-22 08:23:29
【问题描述】：

JQUERY 手机制作

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

|[      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

我怎样才能让它们看起来一个接一个？

【问题讨论】：

你能添加一些代码来看看你到目前为止尝试了什么吗？
我忘了提到这是与 JQUERY MOBILE 一起使用的，所以它在那里有点困难。
您想将图像堆叠在一起吗？每个都有全宽？

标签： css jquery-mobile

【解决方案1】：

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

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

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

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

【讨论】：

这将在简单的 HTML 上完美运行，感谢您的帮助，但是我一直在做一些测试，当使用 JQUERY MOBILE 时，它似乎不会使边距/填充为 0px。我已经尝试过 !important 但仍然......有什么帮助吗？
您可能有一些其他规则会覆盖这些规则。我认为 inline-CSS (style="") 会覆盖外部 CSS，并且动态应用（通过 JS）CSS 甚至会覆盖它。因此，您可能需要使用诸如 Firefox 的 Web 开发人员工具栏之类的工具来检查您的 body 标签上应用的样式。

【解决方案2】：

使用 jQuery 你可以试试这个：

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

【讨论】：

【解决方案3】：

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

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

width: 100%;

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

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

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

您将需要使用某种挂钩（类名或 id 或其他东西）来更新“图像”，否则这会将自身附加到所有图像。

【讨论】：