logo标签列表

适应屏幕分辨率的多个图片头部CSS

htmlcss
3
我正在尝试为我的新网站设置框架，但在某些屏幕分辨率上遇到了问题。似乎我的图片banner-logo.png有时太大了（与用户的屏幕分辨率相关）。
我试图找出一种方法，让我的整个顶部横幅根据用户的屏幕分辨率自动缩放以适应屏幕大小。
我还想将我的菜单居中对齐到
标签的中心（该标签宽度为100%）。
以下是我目前的代码： 

    body {
        background-color: #000000;
        color: white;
    }
    img, object, embed, canvas, video, audio, picture {
        max-width: 100%;
        height: auto;
    }
    ul {
        padding:0;
        margin:0;
        list-style-type:none;
    }
    li {
        margin-left:0px;
        float:left;
        /*pour IE*/
    }
    ul li a {
        display: inline;
        color:white;
        text-decoration:none;
        text-align:center;
        padding:15px;
    }
    ul li a:hover {
        color: yellow;
    }
    div#header {
        position: absolute;
        background-image: url("../images/banner-bg.jpg");
        background-repeat: repeat-x;
        top: 0;
        left: 0;
        width: 100%;
    }
    div#top-banner {
        width: 100%;
        margin: 0 auto;
        padding: 0px;
        border: 0px;
        text-align: center;
        height: 453px;
    }
    div#gars-gauche {
        float: left;
        width: 333px;
        height: 100%;
        background-image: url("../images/gars-gauche.png");
        background-repeat: no-repeat;
        display: inline;
    }
    div#banner-centre {
        height: 453px;
        max-width: 100%;
        text-align: center;
        vertical-align:middle;
        display: inline;
    }
    div#gars-droite {
        float: right;
        width: 333px;
        height: 100%;
        background-image: url("../images/gars-droite.png");
        background-repeat: no-repeat;
        display: inline;
    }
    div#top-menu {
        position:relative;
        top: 20px;
        left: 80px;
    }
    div#content {
        width: 100%;
        text-align: center;
        color: white;
        padding-top: 35px;
    }
    h1 {
        color: white;
    }
    <html>      
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" type="text/css" href="css/style.css">
        </head>
        
        <body>
            <div id="header">
                <div id="top-banner">
                    <div id="gars-gauche"></div>
                    <div id="banner-centre">
                        <img src="images/banner-logo.png" alt="banner" />
                    </div>
                    <div id="gars-droite"></div>
                </div>
                <div id="top-menu">
                    <ul>
                        <li><a href="#">ACCUEIL</a></li>
                        <li><a href="#">MODÈLES</a></li>
                        <li><a href="#">SERVICES</a></li>
                        <li><a href="#">TARIFS</a></li>
                        <li><a href="#">POLITIQUE</a></li>
                        <li><a href="#">PARTENAIRES</a></li>
                        <li><a href="#">RECRUTEMENT</a></li>
                        <li><a href="#">WEBCAM</a></li>
                        <li><a href="#">CONTACT</a></li>
                        <li><a href="#">FACEBOOK</a></li>
                    </ul>
                </div>
                <div id="content">
                    <h1>BIENVENUE CHEZ LES GENTLEMEN'S</h1>
    
                    <hr />
                    <h3>SERVICE D'ACCOMPAGNEMENT POUR HOMMES ET FEMMES DE TOUS ÂGES</h3>
    
                    <p>Les Gentlemen's sont fiers d'offrir aux hommes et femmes un service d'accompagnement de qualité supérieur dans le secteur de Montréal et ses environs.</p>
                    <p>Vous avez envie d'un souper romantique, d'une sortie au cinéma ou d'un moment de tendresse?</p>
                    <p>Nos Gentlemen's s'engagent à vous offrir un moment inoubliable!</p>
                    <a href="http://zonevideo.telequebec.tv/media/18521/emission-428/les-francs-tireurs" target="_new"><img src="images/Banner-les-francs-tireur.jpg" alt="Les Francs Tireurs"/></a>
                    <br />
                    <br />
                    <a href="https://soundcloud.com/les-gentlemens/entrevue-boom-1041fm" target="_new"><img src="images/Banner-Osez-les-gentlemens.jpg" /></a>
    
                </div>
                <div id="footer"></div>
            </div>
        </body>
    
    </html>

1
使用 style 标签应用 CSS，你现在能看到代码吗？同时，图片加载时是否正在加载网页？ - Akilsree1
1
你是否在CSS中尝试过使用background-size: cover;来设置横幅的大小呢？ - Kinburn101
2个回答
2
如果您希望横幅的高度完全可变，建议使用分配给字体大小的视口宽度单位，然后使用EM缩放其他所有内容。至于居中问题，您可以使用text-align: center;将inline项目居中对齐。 em单位与您的字体大小相同，因此您也可以使用em调整任何想要使用的图像的大小，并且它们将随着font-size: 1.3vw;进行缩放。 

#top-menu {
    font-size: 1.3vw;
}
ul {
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
}
ul li {
    display: inline;
    padding: 0 1em;
}

#dog {
    width: 12em;
}
<div id="top-menu">
<img id="dog" src="http://images.clipartpanda.com/dog-clipart-pT5qj6ETB.png">
    <ul>
        <li><a href="#">ACCUEIL</a>
        </li>
        <li><a href="#">MODÈLES</a>
        </li>
        <li><a href="#">SERVICES</a>
        </li>
        <li><a href="#">TARIFS</a>
        </li>
        <li><a href="#">POLITIQUE</a>
        </li>
        <li><a href="#">PARTENAIRES</a>
        </li>
        <li><a href="#">RECRUTEMENT</a>
        </li>
        <li><a href="#">WEBCAM</a>
        </li>
        <li><a href="#">CONTACT</a>
        </li>
        <li><a href="#">FACEBOOK</a>
        </li>
    </ul>
</div>

如果您只想调整图像大小而不是文本，则可以将其宽度设置为屏幕宽度的百分比，使用width: 10vw;表示视口宽度的10%。
1
我已经在我的网站上更改了它，但问题仍然存在。一旦屏幕宽度变小，顶部横幅就会为每个项目更改行（左侧图像，右侧标志和图像）。 - KevLaBoomQc
1
你的菜单项上的padding是变量还是静态的？padding需要是可变的。你能否更新你的问题并附上一个屏幕截图，因为从你所提出的问题中很难理解你正在寻找什么。 - Carson Crane
1

要使菜单居中，请尝试以下内容：

CSS：

ul {
padding:0;
list-style-type:none;
}
li {
margin-left:0px;
display:inline-block;
}
div#top-menu {
position:relative;
top: 20px;
text-align:center;
}

想要将横幅制作成全尺寸大小，没有实际演示很难说。我建议先尝试使用background-size:cover;。

body {
    background-color: #000000;
    color: white;
}
img, object, embed, canvas, video, audio, picture {
    max-width: 100%;
    height: auto;
}
ul {
    padding:0;
    list-style-type:none;
}
li {
    margin-left:0px;
    display:inline-block;
    /*pour IE*/
}
ul li a {
    display: inline;
    color:white;
    text-decoration:none;
    text-align:center;
    padding:15px;
}
ul li a:hover {
    color: yellow;
}
div#header {
    position: absolute;
    background-image: url("../images/banner-bg.jpg");
    background-repeat: repeat-x;
    top: 0;
    left: 0;
    right:0;
    width: 100%;
}
div#top-banner {
    width: 100%;
    margin: 0 auto;
    padding: 0px;
    border: 0px;
    text-align: center;
    height: 453px;
}
div#gars-gauche {
    float: left;
    width: 333px;
    height: 100%;
    background-image: url("../images/gars-gauche.png");
    background-repeat: no-repeat;
    display: inline;
}
div#banner-centre {
    height: 453px;
    max-width: 100%;
    text-align: center;
    vertical-align:middle;
    display: inline;
}
div#gars-droite {
    float: right;
    width: 333px;
    height: 100%;
    background-image: url("../images/gars-droite.png");
    background-repeat: no-repeat;
    display: inline;
}
div#top-menu {
    position:relative;
    top: 20px;
    text-align:center;

}
div#content {
      text-align: center;
    color: white;
    padding-top: 35px;
}
h1 {
    color: white;
}
       <div id="header">
            <div id="top-banner">
                <div id="gars-gauche"></div>
                <div id="banner-centre">
                    <img src="images/banner-logo.png" alt="banner" />
                </div>
                <div id="gars-droite"></div>
            </div>
            <div id="top-menu">
                <ul>
                    <li><a href="#">ACCUEIL</a></li>
                    <li><a href="#">MODÈLES</a></li>
                    <li><a href="#">SERVICES</a></li>
                    <li><a href="#">TARIFS</a></li>
                    <li><a href="#">POLITIQUE</a></li>
                    <li><a href="#">PARTENAIRES</a></li>
                    <li><a href="#">RECRUTEMENT</a></li>
                    <li><a href="#">WEBCAM</a></li>
                    <li><a href="#">CONTACT</a></li>
                    <li><a href="#">FACEBOOK</a></li>
                </ul>
            </div>
            <div id="content">
                <h1>BIENVENUE CHEZ LES GENTLEMEN'S</h1>

                <hr />
                <h3>SERVICE D'ACCOMPAGNEMENT POUR HOMMES ET FEMMES DE TOUS ÂGES</h3>

                <p>Les Gentlemen's sont fiers d'offrir aux hommes et femmes un service d'accompagnement de qualité supérieur dans le secteur de Montréal et ses environs.</p>
                <p>Vous avez envie d'un souper romantique, d'une sortie au cinéma ou d'un moment de tendresse?</p>
                <p>Nos Gentlemen's s'engagent à vous offrir un moment inoubliable!</p>
                <a href="http://zonevideo.telequebec.tv/media/18521/emission-428/les-francs-tireurs" target="_new"><img src="images/Banner-les-francs-tireur.jpg" alt="Les Francs Tireurs"/></a>
                <br />
                <br />
                <a href="https://soundcloud.com/les-gentlemens/entrevue-boom-1041fm" target="_new"><img src="images/Banner-Osez-les-gentlemens.jpg" /></a>

            </div>
            <div id="footer"></div>
        </div>

DEMO

可以翻译为：

{{链接1：演示}}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接