WordPress化するときの画像のサイズについて

Question

背景画像をhtmlとcssでこのように記述しています。

  <section class="p-top_success">
          <div class="l-container">
              <h2 class="c-title-white-center">TOEFL成功事例</h2>
              <div class="p-top_success_list">
                  <?php 
                    $terms = array(
                      'order' => 'DESC',
                      'post_per_page' => -1,
                    );
                    $query = new WP_Query($terms);
                    if($query->have_posts()) :
                    while($query->have_posts()): $query->the_post();
                  ?>
                  <div class="p-top_success_item">
                      <p class="p-top_success_item_title c-textArea-large"><?php echo get_field('success_text'); ?></p>
                      <div class="p-top_success_item_img" style="background-image: url(<?php echo get_field('success_img'); ?>"></div>
                      <div class="p-top_success_item_textArea">
                          <dl>
                              <dt><?php echo get_field('success_work'); ?></dt>
                              <dd><?php echo get_field('success_name'); ?></dd>
                          </dl>
                      </div>
                      <p class="p-top_success_item_result"><?php echo get_field('success_result'); ?></p>
                  </div>
                  <?php endwhile; endif; ?>

              </div>
          </div>
      </section>

 &_img {
      overflow: hidden;
      width: 100%;
      background-size: 45%;
      background-position: center bottom;
      background-repeat: no-repeat;
      background-color: #fff;
      &::before {
        padding-top: 61%;
        content:'';
        display: block;
      }

ちなみにデザインカンプはこちらです。

元々のカンプに挿入されている画像は問題なく表示できたのですが、
サイズの違う画像を挿入したときに表示がおかしくなってしまいます。
以下の通りです。

左と真ん中を画像を変えてみたのですが画像が小さく表示されてしまいます。
どんな画像でも幅いっぱいに表示させるにはどうしたらいいでしょうか？

Answer 1

cssのbackground-size: 45%;の部分を

background-size: 100% auto;とすれば横幅いっぱいになると思いますが、イラストの方も大きくなってしまうと思ますので、イラストの画像の余白を再調整する必要があるかと思います。