幅：100％;高さ：autoは正しく動作しません。

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%に変更すると、最小幅が有効なスペースではなくオリジナルのサイズに縮小されます。

私の回答は、サンプルコードが不足していることによる予測に基づいています。

Answer 2

the_post_thumbnail()引数がオフです。 refsの構文the_post_thumbnail()をチェックしてください。添付ファイルをフルサイズで使用するには

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

最初の引数として、表示する実際のイメージサイズを渡します。第2引数はイメージ属性です。