css - 使用 CSS 调整图像大小以适合显示

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

如果你想用纯 CSS 做到这一点，你可以使用 CSS3 background-size 属性:

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

这是一个 fiddle 演示:

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

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

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