title: How make a div container responsive?
body: <p>I have a div with a background-image assigned in the CSS3 file.
  The image is responsive, so it scales according to the screen size BUT the container keeps the height at all screen sizes.</p>
  
  <p>I need to know if there is a way to make the container responsive as well as the background image.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="responsive&gt; &lt;/div&gt;
  </code></pre>
  
  <p>CSS3:</p>
  
  <pre><code>.responsive {
      background: url('https://s20.postimg.org/o09gf7fvx/bag.jpg') no-repeat center top;
      border: 1px solid red;
      background-size: contain;
      width: 100%;
      height: 270px;
  }
  </code></pre>
  
  <p>I must use background-image selector and no img src tag.
  Here is the <a href="https://jsfiddle.net/Wtk16/zkbbqj7g/1/" rel="nofollow">fiddle file</a>.</p>
  
  <p>Thank you.</p>