如何调整标题中的徽标？答案

【问题标题】：How can I adjust the logo in my header?如何调整标题中的徽标？
【发布时间】：2018-01-30 19:27:23
【问题描述】：

<div class="main-header" style="background: #484747">
<div class="container">
    <div class="row">

        <div class="col-xs-12 col-sm-12 col-md-12 logo-holder">
            <div class="logo">
                <a href="index.php">
                    <img src="img/logo.png" alt="elevensixnine clothing"/>
                </a>
            </div>      
        </div>

我想将图像调整为徽标标题，因为每当我打开它时它都非常大。请帮助我将其居中并在手机或较小的小工具中做出响应

【问题讨论】：

选项 1：缩小 logo 图像，选项 2：由于您使用的是 Bootstrap，因此将 img-responsive 类添加到图像中。 col-md-12 将使用浏览器的全宽，考虑更小的像 col-md-3
你有点不清楚。你想让图像成为标题的背景吗？（不可点击）还是您希望它成为一个链接？
这里提供一个可以复现的代码，大家可以看到问题再试试哟帮助，也包括css

标签： html css twitter-bootstrap

【解决方案1】：

你可以试试这样的

<div class="col-xs-12 col-sm-12 col-md-4 logo-holder">
     <div class="logo">
         <a href="index.php">
             <img src="images/logo.png" alt="elevensixnine clothing" class="img-responsive"/>
         </a>
     </div>      
 </div>

【讨论】：

【解决方案2】：

有点不清楚你想要什么。如果要减小页面中图像的大小。您应该考虑减小实际图像大小，以减少下载到客户端的数据量。您可以使用 CSS 调整图像的大小

为你的 html 我会添加一个 css 类：

<img class="logo-image" src="img/logo.png" alt="elevensixnine clothing"/>

然后在我的css中定义这个类：

例如

.logo-image {
    margin-top: -10px;
    margin-left: -20px;
    max-width: 100px;
}

【讨论】：

【解决方案3】：

<div class="main-header" style="background: #484747">
<div class="container">
    <div class="row">

        <div class="col-xs-12 col-sm-12 col-md-12 logo-holder">
            <div class="logo">
                <a href="index.php">
                    <img src="img/logo.png" alt="elevensixnine clothing"/>
                </a>
            </div>      
        </div>

.logo
{
width:80px;
height:80px;
margin:0 auto;
text-align:center;
}

<div class="main-header" style="background: #484747">
<div class="container">
    <div class="row">

        <div class="col-xs-12 col-sm-12 col-md-12 logo-holder">
            <div class="logo">
                <a href="index.php">
                    <img src="img/logo.png" alt="elevensixnine clothing"/>
                </a>
            </div>      
        </div>

【讨论】：

【解决方案4】：

如果你使用 bootstrap，你可以在你的 div logo 中添加 text-center

<div class="main-header" style="background: #484747">
<div class="container">
    <div class="row">

        <div class="col-xs-12 col-sm-12 col-md-12 logo-holder" style="background: red">
            <div class="logo text-center">
                <a href="index.php">
                    <img src="img/logo.png" alt="elevensixnine clothing"/>
                </a>
            </div>      
        </div>

【讨论】：