wordpress - 如何修复 wordpress 中的响应式图像错误?
问题描述
我正在尝试在 wordpress 上制作一个响应式主题。当我使用桌面分辨率时,缩略图会 100% 调整为卡,但是当我将分辨率降低到移动设备时,它会比卡更大。为什么会这样?
我已经尝试添加 bootstrap 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
解决方案
请在您的图像中添加“img-responsive”类。正确的代码应该是
<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>
推荐阅读
- matlab - 我的 Matlab 的 PSF 代码错过了什么?
- saml-2.0 - 为什么 ITfoxtec 强制执行注销请求以进行签名?
- sql-server - 带条件和计数的 SQL 查询语句
- angular - Angular 9:BehaviorSubject 不适用于远程数据
- javascript - 如何在 react-three-fiber 中初始化 useFrame() 之外的对象
- node.js - 如何使用 URL 连接到 MongoDB 服务器?
- javascript - socketio webapp没有运行
- python - 将 pybind11 绑定标记为已弃用的最佳方法
- android - Android 10:Android Q:NDK:到 /dev 的 opendir 失败并出现 errno 13:权限被拒绝
- kubernetes - Neo4j:Neo.ClientError.Cluster.NotALeader