min-width and max-width not working on image
<p><strong>Details</strong> : I'm using bootstrap, trying to maintain my pictures aspect ratio and making it responsive depending on screen size.</p>

<p><strong>Problem</strong> : I have set my picture's width to 18% and height is auto so the picture does resize depending on the screen width but when the width of the screen is small, the picture becomes too small and minute, if i try to increase width % then on normal screen sizes the picture becomes too big. So i tried to set max-width and min-width on the picture which apparently had no effect at all on the picture!</p>

<p>html code :</p>

<pre><code>&lt;div id="aboutcard" class="card" style="background-color:white;"&gt;
  &lt;h1 class="cardheads"&gt;About&lt;/h1&gt;
  &lt;img id="mypic" class="img-responsive" src="mypicround.png" width="18%"&gt;
&lt;/div&gt;
</code></pre>

<p>css code :</p>

<pre><code>#mypic
{
  margin-right : auto;
  margin-left : auto;
  min-width : 200px;
  max-width : 350px;
}
.card
{
 width : 100%;
 height : 830px;
 margin : 0 auto;
 background-color : #C00000;
}
</code></pre>

<p>bootstrap.css</p>

<pre><code>.img-responsive,
.thumbnail &gt; img,
.thumbnail a &gt; img,
.carousel-inner &gt; .item &gt; img,
.carousel-inner &gt; .item &gt; a &gt; img {
 display: block;
 max-width: 100%;
 height: auto; 
 }
</code></pre>

<p>Any help received would be appreciated!</p>