1. 首页
  2. 问题列表
  3. 使用html和css将图像添加到导航栏
提问者：小点点

使用html和css将图像添加到导航栏


我试图使一个图像适合左侧的导航栏只使用纯html和CSS。到目前为止，我还没有做实际的nav li链接，但下面是我所做的:

HTML

<header id="header">
    <div class="container nav_class">
        <img id="header-img" src="https://odysseeservice.com/wp-content/uploads/2016/12/Microsoft-Dynamics-NAV-Logo.png" alt="">            
        <nav id="nav-bar">
            <ul>
                <li class="nav-link"></li>
                <li class="nav-link"></li>
                <li class="nav-link"></li>
            </ul>
        </nav>
    </div>
</header>

CSS:

.container {
max-width: 1100px;
margin: 0 auto;
overflow: auto;
padding: 0 40px;}

img {
width: 100%;}

.nav_class {
height: 80px;}

我不希望它的高度超过80像素。只有图像在左边和3导航一个字导航链接在右边。我理解如何创建导航链接，并得到所有的容器孩子并排，但我不知道如何使图像更小，并在导航栏的固定位置。

猜猜我主要想问的是，如何让图像适合容器，甚至如何为它制作一个合适的容器。谢谢！


共3个答案

匿名用户

您可以为此使用属性。只需给图像一个完整的高度和宽度，并强制图像包含其父级。

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

编辑:您可以在此页面上了解有关此属性的更多信息。

https://www.w3schools.com/css/css3_object-Fit.asp

匿名用户

如果img的容器是，那么将img设置为将给它80px的高度，并且它将自动缩放它。然后你可以用flexbox帮你定位。像这样的东西:

null

    #nav-bar{
        height: 80px;
        display: flex;
        justify-content: space-between;
    }
    #nav-bar img{
        height: 100%;
    }
    .nav-links{
        display: flex;
    }
    .nav-links li{
        width: 100px;
    }
<header id="header">
    <nav id="nav-bar">
        <img id="header-img" src="https://odysseeservice.com/wp-content/uploads/2016/12/Microsoft-Dynamics-NAV-Logo.png" alt="">            
        <ul class="nav-links">
            <li>A</li>
            <li>A</li>
            <li>A</li>
        </ul>
    </nav>
</header>

匿名用户 

.container {
            max-width: 1100px;
            margin: 0 auto;
            /* overflow: ; */
            padding: 0 40px;
            display:flex;
            flex-direction: row;
            justify-content: space-between ;
        }
        /* that will make image fit */
        img {
            width: 25%;
        }
        /* make the navbar and take every thing inside */
        .nav_class {
            height: 80px;
            overflow: hidden;
        }
        #nav-bar ul{
            margin: 0;
            padding:0;
            display:flex;
            justify-content: space-between;
        }

相关问题