Resizing Large Logo In Drupal Theme
<p>I am trying to customize a Drupal 8 theme to display a large size logo. What I mean is that I am trying to use a larger image so that the logo does not look rugged on high-resolution screens. Currently, when I insert a larger image, it blows up on the page. That is, somehow the theme displays it as-is. How can I modify the CSS to have the logo display as ~ 170 x 70px, even though it is actually a much larger image (ratio preserved).</p>

<p>Relevant HTML (Twig):</p>

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

<p>Relevant CSS:</p>

<pre><code>.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;
}
</code></pre>

<p>Rendered HTML:</p>

<pre><code>&lt;div id="page-container" class="page-container"&gt;

          &lt;div id="header-container" class="header-container white-region"&gt;


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


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