CODEWITHSUNDEEP
csstwitter-bootstrap
Kallol Das
Kallol Das

Reputation: 141

width: 100%; height: auto dont work properly

I am using Wordpress to build a website. I have set images as slider with bootstrap. My css codes are:

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

But it stretches itself unexpectedly. It shows it's height much more bigger than it supposed to be. It decreases its resolution also.

My index.php code is:

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

The original image is

But after using as a slider it shows....

Upvotes: 0

Views: 363

Answers (2)

Z. Zlatev
Z. Zlatev

Reputation: 4820

Your the_post_thumbnail() arguments are off. Check out the syntax the_post_thumbnail() in the refs. To get your attachments at full size use

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

As first argument we pass the actual image size we want to display. Second argument are the image attributes.

Upvotes: 0

Wee Hui Pherng
Wee Hui Pherng

Reputation: 41

Changing your css min-width: 100% to width: 100% should be working as min-width will force the image to scale back to it's original size rather than it's available spaces.

My answer is based on prediction due to lack of sample code.

Upvotes: 2

Related Questions