Question

我有这个HTML：

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

</body>
</html><head>
  <link href="css/testphoto2.css" rel="stylesheet">
</head>
<body>
  <img src="http://placekitten.com/g/200/300" alt="Smiley face" width="420" height="420">  

  <header class="section" >
  </header>
</body>
</html>

和这个css：

body {
    height: auto;
    width: 100%;

    background-color: #111;
}
img {
    max-width: 100%;
    height: auto;
    width: auto\;
}
.section {
   display: inline-block;
    width: 100%;
    height: 100%;
    padding: 200px 0;   
    background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
    background-size: cover;
}

我希望在调整浏览器大小时正确设置小猫比例。在第一张图片中，kitty达到其原始最大值并保持在那里，无论浏览器是否进一步扩大。第二个kitty填充浏览器宽度，但只有在浏览器超出其原始宽度时才会水平拉伸。随着浏览器窗口的增长，我希望kitty可以在两个维度上扩展。如果我从css中删除'padding'属性，则kitty会消失。

Answer 1

将“section”类的CSS更改为：

.section {
 display: inline-block;
 width: 100%;
 height: 300px; /* height should have to provide */
 background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
 background-size: cover;
}

高度应该提供。

Answer 2

为HTML，正文和部分制作高度：100％。从

部分删除填充

html{
    height: 100%;
    width: 100%;

}
body {
    height: 100%;
    width: 100%;

    background-color: #111;
}
img {
    width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
.section {
   display: inline-block;
    width: 100%;
    height: 100%;       
    background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
    background-size: cover;
}

检查出来

https://jsfiddle.net/160cL4xo/

Answer 3

设定宽度＆amp; html＆amp;的高度身体到100％。从部分删除填充。

html,body{ 
    height: 100%;
    width: 100%;
}

工作演示：Fiddler

Answer 4

不幸的是，没有一种解决方案可以使背景图像正确缩放。小猫会以某种方式被缩小。我希望实现的效果由这个css提供：

html, body {
    height: auto;
    width: 100%;
    background-color: #111;
}
img {
    max-width: 100%;
    width: inherit !important;
    height: inherit !important;
}

但我不知道如何为背景图像实现它。注意整个小猫如何按比例填充框架，并且不会通过调整大小来裁剪。

编辑：这会修复背景图片：

.section { display：inline-table; 填充：80％0;
background：url（“http://placekitten.com/g/200/300”）无重复中心; 背景尺寸：封面; width：inherit！important; 身高：继承！重要;

}

不要问我为什么需要80％。但背景小猫现在填充框架和缩放就像html kitty。

https://jsfiddle.net/ox2dy086/

Answer 5

更改CSS＆＃34;部分＆＃34;作为：

.section {
 display: block;
 width: 100%;
 height: 300px; /* height should have to provide */
 background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
 background-size: cover;
}

css图像背景不会在浏览器中正确调整大小

5 个答案: