针对响应式大小调整的内容图片定位

Question

针对响应式大小调整的内容图片定位

3

我在我的WordPress网站上使用"Aqua Resizer"(aq_resizer.php)来调整我的缩略图大小。我的文章是由single.php中的循环创建的。

<?php get_template_part( 'content', 'single' ); ?>

这段代码从content-single.php中提取，其中包含我的文章的代码。

HTML

<div id="post-<?php the_ID(); ?>" <?php post_class('col-md-12'); ?> >

    <div>
        <h2><?php the_title(); ?></h2>
        <h3><?php the_category(', '); ?></h3>
        <?php the_content(); ?>
    </div>  

    <?php
        $thumb = get_post_thumbnail_id();
        $img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
        $image = aq_resize( $img_url, 1200, 720, true ); //resize & crop the image
    ?>

    <?php if($image) : ?>
    <img class="img-responsive" src="<?php echo $image ?>"/>
    <?php endif; ?> 

</div><!-- /#post -->

一切都运行良好（缩放函数可以处理使用<?php the_content(); ?>引入的特色文章中的图片。当窗口大小改变时，图像会随之缩放。

这种效果的实现是因为特色图像应用了class="img-responsive"。

我在文章内容中有一些图片。我希望它们能够以同样的方式运作（现在它们只是按照原始大小引入）。我需要将类img-responsive 应用于 <?php the_content(); ?>中的图片。

- user3550879

我认为你需要检查the_content()函数的代码，并确保你可以传递一个带有该类的变量。 - odedta

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bud Damyanov · Answer 1

将CSS类应用于图像可以在帖子内部完成，只需编辑图像并放置CSS类img-responsive。

如果您无法编辑/修改帖子（或者这太麻烦了），那么第二个选项是在主题的自定义function.php文件中编写一个小代码片段（仅当您在循环中显示帖子时才为真）：

<?php
the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));

请查看 https://codex.wordpress.org/Function_Reference/the_post_thumbnail 获取更多详情。

第三种选择是在header.php文件中使用jQuery，这样页面上的所有图像都会获得响应式类（但这可能不是您想要的，特别是如果您有背景、标志、菜单图像等，并且需要在客户端浏览器中启用JavaScript）：

<script type="text/javascript">
jQuery(function() {
  jQuery(img).addClass('img-responsive');
});
</script>

我能想到的最后一个选项是使用纯CSS：

.content img { height: auto; max-width: 100%; }

.content 是包含您的文章内容的区域。

注意： 您可能还想覆盖 .wp-caption 类，像这样。

.wp-caption { width: auto !important; }