Html 最小宽度和最大宽度不适用于图像

详细信息：我正在使用bootstrap，试图保持图片的纵横比，并使其根据屏幕大小做出响应

问题：我已将图片的宽度设置为18%，并且高度是自动的，因此图片确实会根据屏幕宽度调整大小，但当屏幕宽度很小时，图片会变得太小和太小，如果我尝试增加宽度%，则在正常屏幕尺寸下，图片会变得太大。所以我尝试在图片上设置最大宽度和最小宽度，这显然对图片没有任何影响

html代码：

<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>

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

---

如蒙帮助，将不胜感激

尝试添加

！重要提示：
最小宽度：200px！重要的；最大宽度：320像素！重要的
您可以通过指定宽度：auto来尝试此操作

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

另一种选择，而不是诉诸
！重要信息
是删除

使用

尝试添加
！重要提示：
最小宽度：200px！重要的；最大宽度：320像素！重要的。工作正常！非常感谢。另一个选择，而不是诉诸
！重要信息
您可以尝试删除
元素本身的宽度，并将其移动到CSS。我相信，如果它奏效，那将是一个更好的解决办法。
#mypic
{
  margin-right : auto;
  margin-left : auto;
  min-width : 200px;
  max-width : 350px;
  width:auto;
}

 .card img.img-responsive#mypic{
   margin-right : auto;
   margin-left : auto;
   min-width : 200px;
   max-width : 350px;
}