个人中心
gpt4 book ai didi

html - Header 中的多个图像适应屏幕分辨率 CSS

转载 作者：行者123 更新时间：2023-11-28 01:32:48 27 4
gpt4 key购买 nike

我正在尝试为我的新网站设置一个框架，但我在某些屏幕分辨率上遇到了问题。似乎我的图像 banner-logo.png 有时太大(关于用户屏幕分辨率)。

我正在尝试找出一种方法，让我的整个顶部横幅调整大小，以适应用户的屏幕分辨率。

我还想将我的菜单居中对齐到 div 的中心(宽度为 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>

最佳答案

如果您希望横幅广告的高度完全可变，我建议您使用分配给字体大小的视口(viewport)宽度单位，然后使用 EM 缩放其他所有内容。至于你关于居中的问题，你可以居中inline带有 text-align: center; 的元素

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; 将它们的宽度设置为屏幕宽度的百分比。占视口(viewport)宽度的 10%。

关于html - Header 中的多个图像适应屏幕分辨率 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29761727/

27 4 0
文章推荐： javascript - 为数据表中的第 0 行请求了未知参数 '4'
文章推荐： html - 有没有办法让一个元素居中，然后让另一个元素直接在它的右边？
文章推荐： javascript - 传递 javascript 参数时递减数字
文章推荐： javascript - Canvas 按点绘制图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com