有没有办法让图像全宽和全高？答案

【问题标题】：Is there a way to make an image go full width and height?有没有办法让图像全宽和全高？
【发布时间】：2012-02-26 07:23:09
【问题描述】：

我想要一个可缩放/灵活的全屏内联图像（无裁剪），它允许内容像任何其他网页一样位于其下方。这可能吗？我一直看到的是 position:fixed; 的解决方案。这对我来说是不可行的。

我一直在玩代码：http://css-tricks.com/perfect-full-page-background-image/，但修改它们以执行我想要的操作似乎不起作用。图像的缩放都是错误的，并且经常裁剪图像，这又不是我想要的。

这是一个粗略的想法的代码：

<!DOCTYPE html>

<html>
<head>
<title></title>
</head>

<body>
<!-- full width and height image -->
<div id="feature-wrapper">
   <img src="img/feature.jpg"/>
</div>
<!-- /end fullwidth/height image -->

<!-- lots of content that sits directly beneath big image -->
<img src="img/about-mug.jpg"/>

<img src="img/project1.jpg"/>

<p>Some more content beneath feature</p>

</body>
</html>

任何指针表示赞赏。欢迎使用 jQuery 解决方案 :)

【问题讨论】：

在 div 上以最低堆叠顺序使用背景图像不是一种选择吗？如果是，请查看 - buildinternet.com/project/supersized

标签： jquery css image fullscreen responsive-design

【解决方案1】：

#feature-wrapper img {
    width  : 100%;
    height : auto;
}

这将使图像与其余内容保持一致；较大的图像将推动内容低于较小的图像（基于屏幕尺寸）。这也将保持图像的纵横比不变。

这是一个演示：http://jsfiddle.net/qzvXa/（请注意图像如何重新调整大小，并且当您重新调整页面大小时，下面的内容会发生变化）

更新

您提供的链接用于创建全屏背景图像，如果您想这样做但保持图像的纵横比，那么您可以将图像的容器设置为 position : absolute 或 position : fixed 并仍然保留纵横比图片：

/*set our fullscreen background image's width/height and z-index to something low*/
#feature-wrapper img {
    width   : 100%;
    height  : auto;
    z-index : 1;
}

/*set our container's z-index to the same as the image it contains and make this element stretch the whole page*/
#feature-wrapper {
    z-index  : 1;
    position : absolute;
    top      : 0;
    left     : 0;
    right    : 0;
    bottom   : 0;
}

/*you have to make sure your content will actually display over the background image,
`position : relative` is necessary because z-index isn't applied to elements with `position : static`*/
img, p {
    position : relative;
    z-index  : 2;
}

这是一个演示：http://jsfiddle.net/qzvXa/1/

【讨论】：

非常感谢！参考jsfiddle.net/qzvXa 当我增加浏览器的大小时，图像保持其纵横比。然后图像的底部在可视区域下方继续，即您必须向下滚动才能看到图像的底部。有没有办法防止这种情况发生，确保该图像的高度不高于浏览器窗口的高度？所以图像的底部实际上是浏览器窗口的底部。当用户向下滚动时，他们会立即看到下一个内容。我解释清楚了吗？