Как исправить ошибку адаптивного изображения в WordPress?

Question

Я пытаюсь создать адаптивную тему на WordPress.Когда у меня разрешение рабочего стола, миниатюры на 100% подгоняются под карту, но когда я уменьшаю разрешение до мобильного устройства, оно становится больше, чем карта.Почему это происходит?

Я уже пытался добавить класс адаптивного образа начальной загрузки 4.

<section id="blog" class="blog  d-flex align-items-center mt-5 mb-5">

  <?php query_posts('posts_per_page=3'); ?>


  <div class="container">
<div class="d-flex align-items-center">

 <h1>ÚLTIMAS<BR>PUBLICAÇÕES</h1> </div>    <div class="row">


      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <div class="col-sm-7 col-md-4 mt-3">

        <a href="<?php the_permalink() ?>"><img src="<?php the_post_thumbnail_url('thumbnail'); ?>" class="rounded-top"></a>
        <div class="card-body border rounded-bottom">

          <h4 class="card-title border-bottom pb-3 "><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h4>
          <p class="card-text"><?php the_subtitle(); ?></p>
          <a href="<?php the_permalink() ?>" class="btn btn-outline-dark btn-sm">Continuar lendo</a>
        </div>

      </div>

      <?php endwhile; ?>

      <?php endif; ?>




    </div>
</section>

Ожидается:

Реальность:

Размер миниатюры, настроенный на админ-панели WordPress, составляет 350 x273px

Answer 1

Нацельте свое изображение с помощью CSS, который контролирует его ширину.В настоящее время у вас есть класс rounded-top, поэтому вы можете добавить этот CSS:

.rounded-top {
  max-width: 100%;
  height: auto;
}

Answer 2

Я исправил проблему, добавив .card-img к тегу img.

Спасибо всем за ответы.

Answer 3

Пожалуйста, добавьте класс img-responseive к вашему изображению. Правильный код должен быть

<section id="blog" class="blog  d-flex align-items-center mt-5 mb-5">

  <?php query_posts('posts_per_page=3'); ?>


  <div class="container">
<div class="d-flex align-items-center">

 <h1>ÚLTIMAS<BR>PUBLICAÇÕES</h1> </div>    <div class="row">


      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <div class="col-sm-7 col-md-4 mt-3">

        <a href="<?php the_permalink() ?>"><img src="<?php the_post_thumbnail_url('thumbnail'); ?>" class="rounded-top img-responsive"></a>
        <div class="card-body border rounded-bottom">

          <h4 class="card-title border-bottom pb-3 "><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h4>
          <p class="card-text"><?php the_subtitle(); ?></p>
          <a href="<?php the_permalink() ?>" class="btn btn-outline-dark btn-sm">Continuar lendo</a>
        </div>

      </div>

      <?php endwhile; ?>

      <?php endif; ?>
    </div>
</section>