調整Drupal主題中的大標誌

我正在嘗試自定義Drupal 8主題以顯示大尺寸徽標。我的意思是，我正在嘗試使用更大的圖像，以便在高分辨率屏幕上看起來沒有崎嶇的標誌。目前，當我插入更大的圖像時，它會在頁面上顯示出來。也就是說，主題以某種方式顯示它原樣。我如何修改CSS以使徽標顯示爲〜170 x 70px，儘管它實際上是一個更大的圖像（保留比例）。調整Drupal主題中的大標誌

相關的HTML（小枝）：

<div class="logo-and-site-name-wrapper clearfix"> 
    {% if site_logo %} 
    <div class="logo"> 
     <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-branding__logo"> 
     <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" /> 
     </a> 
    </div> 
    {% endif %} 
    {% if site_name %} 
    <div class="site-name site-branding__name"> 
     <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a> 
    </div> 
    {% endif %} 
    {% if site_slogan %} 
    <div class="site-slogan site-branding__slogan">{{ site_slogan }}</div> 
    {% endif %} 
</div>

相關CSS：

.site-branding__logo { 
display: inline-block; 
margin-right: 1em; /* LTR */ 
margin-bottom: 0.286em; 
} 
[dir="rtl"] .site-branding__logo { 
margin-right: 0; 
margin-left: 1em; 
}

渲染HTML：

<div id="page-container" class="page-container"> 

      <div id="header-container" class="header-container white-region"> 


         <header id="header" role="banner" class="clearfix header fixed-width two-columns"> 
      <div class="container"> 
         <div id="header-inside" class="clearfix header-inside"> 
       <div class="row"> 
            <div class="col-md-4"> 
        <div class="header-area"> 
              <div id="header-inside-first" class="clearfix header-inside-first"> 
          <div class="region region-header-first"> 
    <div id="block-startupgrowth-branding" class="clearfix site-branding block block-system block-system-branding-block"> 


    <div class="logo-and-site-name-wrapper clearfix"> 
      <div class="logo"> 
     <a href="/" title="Home" rel="home" class="site-branding__logo"> 
      <img src="/sites/default/files/logo_Black_Large_1.png" alt="Home" /> 
     </a> 
     </div> 
       </div> 
</div>

來源

2016-10-18 MadPhysicist

試試這個。

.logo-and-site-name-wrapper .logo img { 
    width: 170px; 
    height: 70px; 
}

或

.site-branding__logo img { 
     width: 170px; 
     height: 70px; 
}

CHECK IN CODEPEN：

http://codepen.io/paolomioni/pen/gwqJQB

來源

2016-10-18 16:13:09

既沒有工作。 – MadPhysicist

您可以粘貼呈現的HTML的副本嗎？ –

我已編輯問題以包含呈現的HTML。 – MadPhysicist

2種方式來解決這個問題：

選項1：使用SVG文件的商標。自從矢量基於矢量以來，SVG在任何分辨率下看起來都很清晰。這是推薦的選項。

選項2：上傳圖片的兩倍輸出大小。

所以對於你的特定圖像，上傳340x140文件和CSS設置爲以下：

.site-branding__logo img { 
    width: 170px; 
    height: 70px; 
}

來源

2016-10-20 19:08:13 sagesolutions

第二個選項不起作用（請參閱對其他答案的評論）。我會嘗試選項1.謝謝！ – MadPhysicist

再一次，這兩個選項都不起作用。 – MadPhysicist

試試這個：

.site-branding__logo img { 
    width: 170px !important; 
    height: 70px !important; 
}

來源

2016-10-25 10:20:47

調整Drupal主題中的大標誌

回答

相關問題