min-width and max-width not working on image

Question

Details : I'm using bootstrap, trying to maintain my pictures aspect ratio and making it responsive depending on screen size.

Problem : 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!

html code :

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

css 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;
}

bootstrap.css

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
 display: block;
 max-width: 100%;
 height: auto; 
 }

Any help received would be appreciated!

Solution 1

try adding !important to this rule: min-width: 200px !important; max-width: 320px !important;.

Solution 2

Another option instead of resorting to !important is to remove the width on the <img> element itself and move it to CSS.

For example (I added a working image that you can resize the window to test):

#mypic {
  width: 18%;
  height: auto;
  margin-right : auto;
  margin-left : auto;
  min-width : 200px;
  max-width : 350px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<img id="mypic" class="img-responsive" src="https://res.cloudinary.com/timolawl/image/upload/v1457416170/Paul-Walker-6.jpg" />
  </div>