Question

我正在使用Wordpress来建立一个网站。我已将图像设置为带引导程序的滑块。我的css代码是：

min-width: 100%;
height: auto;
object-fit: contain;
overflow: hidden;

但它意外地延伸了。它表明它的高度比它应该的大得多。它也降低了分辨率。

我的index.php代码是：

<div class="container">

    <div class="row">
        <div class="box">
            <div class="col-lg-12 text-center">
                <div id="carousel-example-generic" class="carousel slide">
                    <!-- Indicators -->
                    <ol class="carousel-indicators hidden-xs">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <?php $minipost = new WP_Query(array(
                            'post_type' => 'cover-slider',
                            'posts_per_page' => 3
                        ));
                        $i = 1;
                        ?>

                    <?php while($minipost->have_posts()): $minipost->the_post();?>
                        <div class="item<?php if ($i == 1) echo ' active'; ?>">

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

                        </div>  
                    <?php $i++; ?>
                    <?php endwhile;?>
                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                        <span class="icon-prev"></span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                        <span class="icon-next"></span>
                    </a>
                </div>

原始图片是

但是在用作滑块之后它会显示....

Answer 1

将css min-width: 100%更改为width: 100%应该正常工作，因为min-width将强制图像缩放回原始大小而不是可用空间。

我的答案是基于缺少示例代码的预测。

Answer 2

您的the_post_thumbnail()参数已关闭。查看refs中的语法the_post_thumbnail()。要使用完整尺寸的附件

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

作为第一个参数，我们传递了我们想要显示的实际图像大小。第二个参数是图像属性。

宽度：100％;身高：自动无法正常工作

2 个答案: