title: how to give image a dynamic width and height when using bootstrap responsive grid system
body: <p>I am using bootstrap's grid system and here's <a href="http://www.shopious.com" rel="noreferrer">my website</a>. The issue is that on initial load the item card looks pretty crappy like this:</p>
  
  <p><img src="https://i.stack.imgur.com/I7Aew.png" alt="enter image description here"></p>
  
  <p>and here's what it looks like after it loads:</p>
  
  <p><img src="https://i.stack.imgur.com/oneUN.png" alt="enter image description here"></p>
  
  <p>As you can see the issue is because I am not supplying the image's width and height and hence before it load I am seeing this weird layout which is not good. The issue why I am not supplying a width and height is because this is responsive, such that when I resize the width of the browser then the width of the card also changes, and hence supplying a constant width and height doesn't work. What's the best solution out of this?</p>