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

试试这个。

.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 ways to solve this issue:

Option 1: Use an SVG file for your logo. An SVG will look crisp at any resolution since its vector based. This is the recommended option.

Option 2: Upload an image double the outputted size.

So for your particular image, upload a 340x140 file and set the CSS to the following:

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

Answer 3

试试这个：

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

调整Drupal主题中的大型徽标

3 个答案: