Изменение размера логотипа в Drupal Theme

Question

Я пытаюсь настроить тему Drupal 8 для отображения логотипа большого размера. Я имею в виду, что я пытаюсь использовать более крупное изображение, чтобы логотип не выглядел прочным на экранах с высоким разрешением. В настоящее время, когда я вставляю более крупное изображение, оно взрывается на странице. То есть, как-то тема отображает его как есть. Как я могу изменить CSS, чтобы логотип отображался как ~ 170 x 70 пикселей, хотя на самом деле это гораздо более крупное изображение (соотношение сохранено).

Соответствующий 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> 

Answer 1

Попробуйте это.

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

2 пути решения этой проблемы:

Вариант 1: Использовать файл SVG для вашего логотип. SVG будет выглядеть четким при любой резолюции с момента его создания на основе вектора. Это рекомендуемый вариант.

Вариант 2: Загрузить изображение в двойном размере.

Так что для вашего конкретного изображения, загрузите 340x140 файл и установить CSS на следующее:

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

Answer 3

Попробуйте это:

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