Question

我有块，里面有三个盒子。所有都是响应，如图中所示。 CSS如下所示。

.blocks {
  display: block;
  margin: 0 auto;
  width: 75%;
  height: 450px; 
}


.box1, .box2, .box3 {

    width: 33.333%;
    height: 100%;
    vertical-align: top;
    display: inline-block;
    zoom: 1;
    text-align: center;

}

插入图像时，图像无响应。我的HTML如下所示。

<div class="blocks">
      <div class="col-sm-4 col-xs-4 box1" style="background-color:lavender;">
           <?php 
                $args = array( 
            'type' => 'post',
            'posts_per_page' => 1,
            'category__in' => '23',

            );

        $lastBlog = new WP_Query( $args ); 
                if( $lastBlog->have_posts() ):
                    while( $lastBlog->have_posts() ): $lastBlog->the_post(); ?>
             <?php if ( has_post_thumbnail() ) {  
                    the_post_thumbnail(); 
                    the_title( sprintf('<h3 class="entry-title"><a href="%s">', esc_url( get_permalink() ) ),'</a></h3>' );  
             } ?>
            <?php endwhile;
              endif;
              wp_reset_postdata();      
           ?>
      </div>
      <div class="col-sm-4 col-xs-4 box2" style="background-color:lavenderblush;">
           <?php 
                $args = array( 
            'type' => 'post',
            'category__in' => '23',
            'posts_per_page' => 1, 
            'offset' => 1,


            );

        $lastBlog = new WP_Query( $args ); 
                if( $lastBlog->have_posts() ):
                    while( $lastBlog->have_posts() ): $lastBlog->the_post(); ?>
             <?php if ( has_post_thumbnail() ) {  
                    the_post_thumbnail();
                    the_title( sprintf('<h3 class="entry-title"><a href="%s">', esc_url( get_permalink() ) ),'</a></h3>' );  
             } ?>
            <?php endwhile;
              endif;
              wp_reset_postdata();      
           ?>
      </div>
      <div class="col-sm-4 col-xs-4 box3" style="background-color:lavender;">
           <?php 
                $args = array( 
            'type' => 'post',
            'category__in' => '23',
            'posts_per_page' => 1, 
            'offset' => 2,


            );

        $lastBlog = new WP_Query( $args ); 
                if( $lastBlog->have_posts() ):
                    while( $lastBlog->have_posts() ): $lastBlog->the_post(); ?>
             <?php if ( has_post_thumbnail() ) {  
                    the_post_thumbnail();
                    the_title( sprintf('<h3 class="entry-title"><a href="%s">', esc_url( get_permalink() ) ),'</a></h3>' ); 
             } ?>
            <?php endwhile;
              endif;
              wp_reset_postdata();      
           ?>   
      </div>
    </div>

我的照片来自帖子。

问题是当页面尺寸变小时，图像会相互重叠。

如何在divs内制作图像也有响应？

编辑：放入<img>标记可以正常工作。我确实喜欢

<img class="img-responsive" width="100%" height="100%"
           <?php 
                $args = array( 
            'type' => 'post',
            'category__in' => '23',
            'posts_per_page' => 1, 
            'offset' => 1,


            );

        $lastBlog = new WP_Query( $args ); 
                if( $lastBlog->have_posts() ):
                    while( $lastBlog->have_posts() ): $lastBlog->the_post(); ?>
             <?php if ( has_post_thumbnail() ) {  
                    the_post_thumbnail();
                    the_title( sprintf('<h4 class="entry-title"><a href="%s">', esc_url( get_permalink() ) ),'</a></h4>' ); 
             } ?>
            <?php endwhile;
              endif;
              wp_reset_postdata();      
           ?>

但问题是我无法在最后使用<img关闭>。如果我将>放在最后，>会在页面上显示为文字。

Answer 1

由于您使用的是bootstrap，只需将图像的class属性响应于图像

即可

<img class="img-responsive" src="....">

Answer 2

你可以使用class =＆＃34; img-responsive＆＃34;为了这个

Answer 3

您可以尝试以下代码：

.box1 img,
.box2 img,
.box3 img

{

width: 100%;
height:auto; 

}

Answer 4

如果您的应用程序使用Bootstrap，那么一定要使用

<img class="img-responsive" src="....">

否则尝试：

.box1 img, .box2 img, .box3 img{
  max-width: 100%;
  height:auto; 
}

如何使<div>内的图像响应？

4 个答案: