使用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"> < ?phpif(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="http://www.srcmini.com/< ?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="http://www.srcmini.com/< ?php //the_permalink(); ?>"> Selengkapnya > < /a> < /span> --> < ?php $i++; endwhile; ?> < ?phpelse : ?> < ?phpecho wpautop('Sorry no posts were found'); ?> < ?php endif; ?> < /div> < /article> < /row> < /section>

【使用the_post_thumbnail()图像引导4张卡片可以通过wordpress拉伸以适合自己()】上面是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()): ?>

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

    推荐阅读