Question

我已经开始使用bootstrap / css等设置我自己的网站了，虽然我想用图像替换导航栏品牌，但我已经有了基本的外观/布局。我能做到;但成效有限......

我正在努力获得一个更大的.svg图像，以便正确地缩放以适应正确的空间 - 它目前使网站不受影响。在此之前，我有一个在桌面上看起来很好的.jpg，但在移动设备上却非常糟糕。

这是我为导航栏提供的代码。图像：

    <html>
    <head>
            <title>Chris MacDonald Visualisation</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href = "css/bootstrap.min.css" rel = "stylesheet">
            <link href = "css/styles.css" rel = "stylesheet">
    </head>
    <body>

            <div class = "navbar navbar-inverse navbar-fixed-top" Role = "Navigation">
                <div class = "container">

                        <div class = "logocontainer pull-left">
                            <a class="navbar-brand" href="index.html">
                                <img src="img/motif.svg">
                            </a>
                        </div>


                    <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                    </button>



                    <div class = "collapse navbar-collapse navHeaderCollapse">

                        <ul class = "nav navbar-nav navbar-right">

                            <li class = "active"><a href = "#">Works</a></li>
                            <li><a href = "services.html">Services</a></li>
                            <li><a href = "about.html">About Me</a></li>
                            <li><a href = "contact.html">Contact</a></li>

                        </ul>

                    </div>

                </div>                
            </div>

我希望这对你们有意义，这是我第一次尝试编写一个网站，而不是使用某种应用程序来为我做这件事。如果你想看看这个问题的样子; www.cmvisual.com

提前致谢。

Answer 1

你正在使用SVG并且根据w3school“SVG图像以元素开头”否则正常方式你的图像太大你必须使用短图像否则你可以把css放宽。但最好是你应该使用小图像

Bootstrap导航栏图像大小

1 个答案: