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

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

css image browser

Css 我想得到一个完整的图像作为我的标题,css,image,browser,header,adjustable,Css,Image,Browser,Header,Adjustable,哎,，我想得到一个完整的图像，在浏览器的宽度，作为我的标题。但问题是，我有一个水平滚动条，我不想这样。我想要的是，如果浏览器也进行了调整，则图像将进行调整。这在css中是可能的吗？对不起，我的英语不好。这是我的密码 #header { Margin-left:auto; Margin-right:auto; heigth:400px; position: center center; min-wi

哎,，我想得到一个完整的图像，在浏览器的宽度，作为我的标题。但问题是，我有一个水平滚动条，我不想这样。我想要的是，如果浏览器也进行了调整，则图像将进行调整。这在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>

#标题{
左边距：自动；
右边距：自动；
高度：400px；
位置：中心；
最小宽度：100%；
最大宽度：1024；
}

试试看

您可以选择将图像设置为背景图像，并使用背景大小：封面；像这样：

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

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

#标题{
宽度：100%；高度400px；
保证金：0自动；
背景：url（“../header.png”）；
背景尺寸：封面；
}

您可以在此处找到有关背景大小的更多说明：

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

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

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

您可以设置

#标题img{max width:100%}

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

您需要发布更多相关的HTML/css来演示这个问题，或者提供一个实例。有几种方法可以在没有水平滚动条的情况下实现全页面宽度图像的效果。我经常使用的一种方法是结合css将图像大小设置为“宽度：100%；高度：自动在图像上。如果其父容器为全浏览器宽度；图像将随着视图端口大小的重新调整而调整

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