Question

嘿我希望在浏览器的宽度上得到一个完整的图像作为我的标题。但问题是，我得到一个水平滚动条，我不希望这样。我想要的是，如果浏览器也调整图像调整。这可能与CSS？对不起，我的英语不好。这是我的代码

#header {
        Margin-left:auto;
        Margin-right:auto;
        heigth:400px;
        position: center center;    
        min-width: 100%;
        max-width: 1024;
}

     <body>
        <div id="header">
            <img src="header.png" />
        </div>

Answer 1

尝试。

#header {
    max-width: 100%;
    background:#ffffff url("header.png") repeat-x;
}

Answer 2

您可以选择将图片设置为背景图片并使用background-size：cover;像这样：

#header {
    width: 100%; height 400px;
    margin: 0 auto;
    background: url("../header.png");
    background-size: cover;
}

<div id="header"></div>

您可以在此处找到有关background-size的更多说明： http://www.css3.info/preview/background-size/

Answer 3

您可能正在寻找背景资料：

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

使用封面方法将缩放图像以填充容器。

Answer 4

您可以设置#header img { max-width: 100%; }

Answer 5

嗯，如果我做背景图像，图像本身就不会显示出来。也许因为它的宽度为1400px，可以在任何水平滚动条中为浏览器的每个不同宽度裁剪一次。

我想得到一个完整的图像作为我的标题

5 个答案: