Question

使用网页响应式设计我想在首页上放置一个大图像作为背景，它始终保持100％的宽度和高度。与https://ghost.org

非常相似

以下是我尝试的方法： http://jsfiddle.net/Jp5AQ/1144/

div img {
    max-width: 100%;
    min-height: 100%;
    height: auto;
    outline: solid 1px red;
}

但它无法正常工作。通过调整窗口大小来扰乱图像。

Answer 1

您使用的是<img />代码。

通过CSS调用图像并使用background-size: cover;。

以下是DEMO

Answer 2

试试这个css：

.banner-bg { 
    background-image: url(../images/header-bannerbg.png); 
    background-position: fixed; 
    background-repeat: no-repeat; 
    height: 580px; 
    -webkit-background-size: 100% 100%;  
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}

http://jsfiddle.net/aashi/Jp5AQ/1146/

Answer 3

您的图片将始终是浏览器窗口的最大宽度;但是，高度不会保持在浏览器窗口的100％，因为屏幕上的图像需要与原始图像保持成比例。随着浏览器窗口的宽度缩小，高度也会缩小。否则，您的图像将会歪斜。

Answer 4

您可以使用财产background: cover 这篇文章可能很有用http://css-tricks.com/perfect-full-page-background-image/。

Answer 5

使用img标签很难做到这一点。

它可以更好地用于：

background-size: cover;
background-position: center;

这是Fiddle的

Answer 6

只需删除插入了图像标记的图像，然后将图像作为背景放在div中。

div：应该获得窗口大小的高度和宽度（最有可能使用javascript）

使用css样式插入图片：

div{ background: url(path_to_img/img.jpeg) center center no-repeat; background-size: contain; // you also can use cover, just look how you wish the picture should be cut or not. for background-size you also need some prefix for some browsers } 这是css背景的链接：http://www.w3schools.com/cssref/css3_pr_background.asp

以下是background-size的链接：http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 7

如果您想使用纯CSS执行此操作，可以使用CSS3 background-size属性：

div {
    width: 100%;
    height: 100%;
    background: url(your-image.jpg) no-repeat center center; 
    background-size: cover;
}

这是一个小提琴演示：

http://jsfiddle.net/Jp5AQ/1149/

这与您提供的Ghost网站上使用的技术相同。

请注意，我已提供html和body元素height:100%，以便div拉伸以填充视口的高度。

调整图像大小以适合CSS显示

7 个答案: