使用the_post_thumbnail()图像引导4张卡片可以通过wordpress拉伸以适合自己？

我正在尝试拉伸功能图像以适合引导卡。卡对齐并正确响应, 但是图像遍布整个位置。

    <section class="container"><!-- container - 3 --><p class="text-white">.</p>
        <div class="row">
            <article class="col-sm-12 col-md-4 mb-4 ">
                <div class="card">
                    <?php  if(have_posts()) : ?>
                    <?php $i = 4; while (have_posts() && $i < 5) : the_post(); ?>
                    <?php if(has_post_thumbnail()): ?>
                    <?php the_post_thumbnail( 'small', 'style=max-width:150%;height:auto;'); ?>
                    <?php endif;?>
                            <!-- <a href="<?php //the_permalink(); ?>"> -->
                            <div class="sub-Article text-center card-title"><?php the_title();?>
                            <!-- </a> -->
                    <p>Article - <span class="font-weight-normal small"><?php the_time('F j, Y g:i:a');?></span></div>
                            <!-- <p class="Main-Article"><?php //the_title(); ?></p> -->
                            <!-- <a class="button btn-primary btn-lg text-left" href="<?php //the_permalink(); ?>">
                             Selengkapnya ></a></span> -->
                    <?php $i++;  endwhile; ?>
                    <?php  else : ?>
                    <?php  echo wpautop('Sorry no posts were found'); ?>
                    <?php endif; ?>
                </div>
            </article>
        </row>
     </section>

上面是index.php中一张卡片的示例。我使用了很少的CSS, 因为我想看看是否有可能仅使用bootstrap来安排所有内容。 CSS所做的只是在图像的标题和日期之前添加一个冷淡的正面。

.sub-Article{
    margin-top:-160px;
    background-color:white;
    opacity:0.5;
    padding: 30px 30px 35px 30px
}

具有讽刺意味的是, 以wp-admin身份登录的Wordpress后端cms中显示的功能图像可以完美运行！

#1

好的, 我知道这不应该, 但是可以！在玩完图像之后, 我发现只需添加<img class =” style”而不用关闭标签就可以了！

<img class="style"<?php if(has_post_thumbnail()): ?> 

然后随便给它喜欢的样式:)