title: How do I make an parent resize when child element image is resize in percentage?
body: <p>I have a block level element which has a "image" as a child element. When i downsize image in percentage, block level element do not fit according to the new size of image, however block level parent element holds the 100% position of child image. </p>
  
  <p>I want parent element to respect the size as i change the child element size in percentage. Here is the link showing the problem: </p>
  
  <p><a href="http://codepen.io/rosn/pen/ZOoGgm" rel="nofollow noreferrer">http://codepen.io/rosn/pen/ZOoGgm</a></p>
  
  <p>codepen html: </p>
  
  <pre><code>&lt;a href="#"&gt;
    &lt;img src="https://s-media-cache-ak0.pinimg.com/236x/f6/35/e7/f635e7cdfcf59c09236a44df28f53d92.jpg" alt="" /&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>codepen css: </p>
  
  <pre><code>a{
    display: inline-block;
    border: 1px solid red; 
  }
  
  img{
      width: 70%;
      border: 1px solid blue;
  }
  </code></pre>
  
  <p><strong>Problem trying to solve in Bootstrap:</strong> 
  To be more precise, this problem was caused in bootstrap navigation, when i applied a bigger image inside "navbar-brand". when i decreased the screen size "navbar-brand" was flowing below "nav-collapse" button as shown in the figure. </p>
  
  <p><a href="https://i.stack.imgur.com/BGWGF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BGWGF.png" alt="enter image description here"></a></p>
  
  <p>In order to make the logo small and fit in the same line as the "nav-collapse" button, i tried to downsize the image using media query using width in percentage however the parent shown in red border does not sink with the downsize image. </p>
  
  <p>Here is the link of bootstrap code of real problem: 
  <a href="http://codepen.io/rosn/pen/JKvGvr?editors=1100" rel="nofollow noreferrer">http://codepen.io/rosn/pen/JKvGvr?editors=1100</a></p>
  
  <p>and this screen shot shows the logo image dropping in small size using the percentage width. Please decrease the screen width and you will have a replicate of the problem. 
  <a href="https://i.stack.imgur.com/Wio1D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wio1D.png" alt="enter image description here"></a></p>