title: How to make image inside <div> is responsive?
body: <p>I have blocks and inside has three boxes.
  All are responsive as shown in the image.
  <a href="https://i.stack.imgur.com/q1TRB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q1TRB.jpg" alt="ima"></a>
  CSS are shown below.</p>
  
  <pre><code>.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;
  
  }
  </code></pre>
  
  <p>When I insert image, the image is not responsive.
  My HTML is shown below.</p>
  
  <pre><code>&lt;div class="blocks"&gt;
        &lt;div class="col-sm-4 col-xs-4 box1" style="background-color:lavender;"&gt;
             &lt;?php 
                  $args = array( 
              'type' =&gt; 'post',
              'posts_per_page' =&gt; 1,
              'category__in' =&gt; '23',
  
              );
  
          $lastBlog = new WP_Query( $args ); 
                  if( $lastBlog-&gt;have_posts() ):
                      while( $lastBlog-&gt;have_posts() ): $lastBlog-&gt;the_post(); ?&gt;
               &lt;?php if ( has_post_thumbnail() ) {  
                      the_post_thumbnail(); 
                      the_title( sprintf('&lt;h3 class="entry-title"&gt;&lt;a href="%s"&gt;', esc_url( get_permalink() ) ),'&lt;/a&gt;&lt;/h3&gt;' );  
               } ?&gt;
              &lt;?php endwhile;
                endif;
                wp_reset_postdata();      
             ?&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4 col-xs-4 box2" style="background-color:lavenderblush;"&gt;
             &lt;?php 
                  $args = array( 
              'type' =&gt; 'post',
              'category__in' =&gt; '23',
              'posts_per_page' =&gt; 1, 
              'offset' =&gt; 1,
  
  
              );
  
          $lastBlog = new WP_Query( $args ); 
                  if( $lastBlog-&gt;have_posts() ):
                      while( $lastBlog-&gt;have_posts() ): $lastBlog-&gt;the_post(); ?&gt;
               &lt;?php if ( has_post_thumbnail() ) {  
                      the_post_thumbnail();
                      the_title( sprintf('&lt;h3 class="entry-title"&gt;&lt;a href="%s"&gt;', esc_url( get_permalink() ) ),'&lt;/a&gt;&lt;/h3&gt;' );  
               } ?&gt;
              &lt;?php endwhile;
                endif;
                wp_reset_postdata();      
             ?&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4 col-xs-4 box3" style="background-color:lavender;"&gt;
             &lt;?php 
                  $args = array( 
              'type' =&gt; 'post',
              'category__in' =&gt; '23',
              'posts_per_page' =&gt; 1, 
              'offset' =&gt; 2,
  
  
              );
  
          $lastBlog = new WP_Query( $args ); 
                  if( $lastBlog-&gt;have_posts() ):
                      while( $lastBlog-&gt;have_posts() ): $lastBlog-&gt;the_post(); ?&gt;
               &lt;?php if ( has_post_thumbnail() ) {  
                      the_post_thumbnail();
                      the_title( sprintf('&lt;h3 class="entry-title"&gt;&lt;a href="%s"&gt;', esc_url( get_permalink() ) ),'&lt;/a&gt;&lt;/h3&gt;' ); 
               } ?&gt;
              &lt;?php endwhile;
                endif;
                wp_reset_postdata();      
             ?&gt;   
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>My images are taken from posts.</p>
  
  <p>The problem is when the page size become smaller, the images overlap each other. 
  <a href="https://i.stack.imgur.com/1HTie.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1HTie.jpg" alt="img"></a></p>
  
  <p>How can I make images inside the <code>divs</code> are also responsive?</p>
  
  <p>EDIT:
  Putting inside <code>&lt;img&gt;</code> tag works.
  I did like</p>
  
  <pre><code>&lt;img class="img-responsive" width="100%" height="100%"
             &lt;?php 
                  $args = array( 
              'type' =&gt; 'post',
              'category__in' =&gt; '23',
              'posts_per_page' =&gt; 1, 
              'offset' =&gt; 1,
  
  
              );
  
          $lastBlog = new WP_Query( $args ); 
                  if( $lastBlog-&gt;have_posts() ):
                      while( $lastBlog-&gt;have_posts() ): $lastBlog-&gt;the_post(); ?&gt;
               &lt;?php if ( has_post_thumbnail() ) {  
                      the_post_thumbnail();
                      the_title( sprintf('&lt;h4 class="entry-title"&gt;&lt;a href="%s"&gt;', esc_url( get_permalink() ) ),'&lt;/a&gt;&lt;/h4&gt;' ); 
               } ?&gt;
              &lt;?php endwhile;
                endif;
                wp_reset_postdata();      
             ?&gt;
  </code></pre>
  
  <p>But the problem is I can't close the <code>&lt;img</code> with <code>&gt;</code> at the end. If I put <code>&gt;</code> at the end, <code>&gt;</code> appears as text on the page.</p>