绝对 CSS 图像 — 100% 宽度和高度

Question

我正在基于 WP 高级主题为客户构建以下网站。如您所见，我正在尝试对其进行设置，以便可以全屏应用图像。

http://www.dev-redakhelladi.co.uk.gridhosted.co.uk/about/

我遇到的问题是，当图像出现时，我现在会看到一个水平滚动条。

我已经将图像位置设置为 absolute，所以我认为这可以防止任何滚动条问题。我做错了什么吗？

Answer 1

您可能希望使用 CSS 而不是 IMG 元素将图像设置为背景图像。

#content-wrapper {
    background-image: url('http://www.dev-redakhelladi.co.uk.gridhosted.co.uk/wp-content/uploads/2015/01/iStock_000008484482Medium.jpg');
}

Answer 2

将此规则添加到您的 body

body {
    overflow-x: hidden
}

Answer 3

您可以将其设置为背景图片：

.background-photo{
    background: url('url_to_image') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 4

您可以将图片用作正文标签中的背景，将背景大小设置为覆盖，这样图片将适合您的页面

Answer 5

首先，您不应将背景加载为 img。在某些固定定位的元素上使用 background-image 属性加载它。这样，当图像不可用时，您不会看到丑陋的浏览器占位符显示 [image-not-found].

其次，每当您将一个元素的宽度设置为 100% 并向其添加填充时，它就会在 x 轴上溢出。如果您不希望这样，请按照@abforce 的建议将 overflow-x 设置为隐藏在其父级上。

添加完整背景图片的最佳方法是将其作为背景添加到固定位置 div，这是 body 元素的直接后代。

这是一个例子：

<body>
    <div class="full-background"></div>
    <!-- Here goes your content... --> 
</body>

CSS:

.full-background {
    position: fixed;
    background-image: url('link-to-your-image');
    background-size: cover;
    top: 0;
    width: 100%;
    height: 100%;
}

绝对 CSS 图像 — 100% 宽度和高度

Absolute CSS Image — 100% Width and Height

html

css

background

image