0

嘿，我想在浏览器的宽度内获得一个完整的图像作为我的标题。但问题是，我得到一个水平滚动条，我不想要那个。我想要的是，如果浏览器也调整，图像也会调整。这可以用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>
4

5 回答 5

0

尝试。

#header {
    max-width: 100%;
    background:#ffffff url("header.png") repeat-x;
}
于 2013-10-09T19:21:12.923 回答
0

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

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

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

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

于 2013-10-09T19:21:38.837 回答
0

您可能正在寻找背景封面：

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;
}

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

于 2013-10-09T19:24:09.673 回答
0

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

于 2013-10-09T19:26:24.500 回答
0

嗯，如果我做背景图像，图像本身不会出现。也许是因为它的宽度为 1400 像素，可以在没有任何水平滚动条的情况下为浏览器的每个不同宽度进行 css 裁剪。

于 2013-10-10T11:24:30.343 回答