css - 宽度 : 100%; height: auto dont work properly

Question

我正在使用 Wordpress 建立网站。我已将图像设置为带有 Bootstrap 的 slider 。我的 CSS 代码是:

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

但它意外地拉伸(stretch)了自己。它显示它的高度比它应该的要大得多。它也降低了它的分辨率。

我的 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>

原图为

但在用作 slider 后显示....

Answer 1

将您的 css min-width: 100% 更改为 width: 100% 应该有效，因为 min-width 会强制图像缩小到其原始大小，而不是比它的可用空间。

由于缺少示例代码，我的回答基于预测。