我正在尝试拉伸功能图像以适合引导卡。卡对齐并正确响应, 但是图像遍布整个位置。
<
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()): ?>
然后随便给它喜欢的样式:)
推荐阅读
- 缩放时的bootstrap网格对齐问题
- Avada在菜单项之间添加空格
- 输入凭据后空白wp-login.php页面
- 桌面和移动设备上的背景图片定位
- 更新帖子时自动重定向到wp-admin/post
- Avada WordPress主题(容器背景不起作用)
- 将CSS样式应用于悬停时访问的链接
- #yyds干货盘点# go template模板语法
- 观察者模式C++实现