php - CSS 没有正确显示 .custom-logo，是 PHP 的问题吗？

Question

我已经尝试了几种方法，最终让图形以完整图像大小显示应该起作用的是:

.custom-logo {
   max-width: 100%;
}

它不起作用。无论出于何种原因，它只会以 225 x 225 的分辨率显示 .custom-logo，而且我似乎无法覆盖 WP 模板。我不是 PHP 专家，但从检查图像可以看出，它似乎与模板 PHP 代码有关。这是显示 Logo 的代码。任何允许图像以全尺寸显示的想法都会有所帮助!显然我缺少一些东西。

<div class="site-branding">
<?php has_custom_logo() ? the_custom_logo() : ''; ?>

<div class="site-branding-text">
    <?php if ( is_front_page() ) : ?>
        <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    <?php else : ?>
        <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
    <?php
    endif;

    $description = get_bloginfo( 'description', 'display' );
    if ( $description || is_customize_preview() ) : ?>
        <p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
    <?php
    endif; ?>
</div><!-- .site-branding-text-->

谢谢!

Answer 1

max-width 不设置图像的宽度，它设置允许调整大小的最大宽度。

使用 width: 100%; 将图像的宽度设置为其空间的 100%。

img{
  border: 1px solid black;
}

#div1 img{
  max-width: 100%;
}

#div2 img{
  width: 100%;
}

max-width: 100%
<div id="div1">
  <img src="https://via.placeholder.com/150">
</div>
width: 100%
<div id="div2">
  <img src="https://via.placeholder.com/150">
</div>