Question

我想要一个可扩展/灵活的全屏内嵌图像（无裁剪），允许内容像任何其他网页一样位于其下方。这可能吗？我一直看到的是位置解决方案：固定;这对我来说是不可行的。

我一直在使用代码：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解决方案欢迎：）

Answer 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/

有没有办法让图像达到宽度和高度？

1 个答案:

更新