html - 如何使 中的图像具有响应性？

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，就在图片上放一个image responsive的类属性

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