CSS не отображает .custom-lo go правильно, проблема PHP?

Question

Я пробовал несколько вещей, в конечном счете, что должно работать, чтобы графическое изображение c отображалось в полном размере изображения, это:

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

Это не работает. Он будет отображать только .custom-lo go при 225 x 225 по любой причине, и я не могу переопределить шаблон WP. Я не эксперт по PHP, но из того, что я могу судить по проверке изображения, похоже, что он как-то связан с шаблоном PHP кода. Вот код, который отображает lo go. Любые мысли, которые позволят изображению отображаться в полном размере, будут полезны! Очевидно, что-то мне не хватает.

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