如何修复 wordpress 中的响应式图像错误?

Posted

技术标签:

【中文标题】如何修复 wordpress 中的响应式图像错误?【英文标题】:How to fix responsive image bug in wordpress? 【发布时间】:2019-08-18 15:46:07 【问题描述】:

我正在尝试在 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

【问题讨论】:

【参考方案1】:

请在您的图片中添加“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>

【讨论】:

【参考方案2】:

使用一些可以控制其宽度的 CSS 来定位您的图像。你目前有班级rounded-top,所以你可以添加这个CSS:

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

【讨论】:

【参考方案3】:

我通过将 .card-img 添加到 img 标签来解决问题。

谢谢大家的回答。

【讨论】:

以上是关于如何修复 wordpress 中的响应式图像错误?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 WordPress 中创建响应式图像轮播和幻灯片自定义帖子类型内容

如何在上传图像时修复WordPress上的HTTP错误?

如何修复css文件wordpress中的背景图像

Wordpress 将响应式 srcset 标题图像添加到主题

修复响应图像上的位置图像

如何修复wordpress中的php致命错误和http错误500