在 Drupal 主题中调整大徽标的大小

Question

我正在尝试自定义 Drupal 8 主题以显示大尺寸徽标。我的意思是我正在尝试使用更大的图像，以便徽标在高分辨率屏幕上看起来不粗糙。目前，当我插入更大的图像时，它会在页面上爆炸。也就是说，主题以某种方式按原样显示它。如何修改 CSS 以使徽标显示为 ~ 170 x 70px，即使它实际上是一个更大的图像（保留比例）。

相关 HTML（Twig）：

<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>

Answer 1

解决此问题的两种方法：

选项 1：为您的徽标使用 SVG 文件。 SVG 在任何分辨率下都会看起来很清晰，因为它是基于矢量的。这是推荐的选项。

选项 2： 上传两倍于输出大小的图片。

因此，对于您的特定图像，请上传 340x140 文件并将 CSS 设置为以下内容：

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

Answer 2

试试这个。

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

或

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

签入 CODEPEN：

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

Answer 3

试试这个：

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