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

Question

详细信息：我正在使用引导程序，试图保持我的图片宽高比并根据屏幕尺寸使其响应。

问题：我已将图片的宽度设置为 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>

CSS 代码：

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

引导程序.css

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

收到任何帮助将不胜感激！

原文由 programmingandroid 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试将 !important 添加到此规则： min-width: 200px !important; max-width: 320px !important; 。

原文由 Mohit Bhardwaj 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

另一种选择而不是诉诸 !important 是删除 width 在 <img> 元素本身并将其移动到 CSS。

例如（我添加了一个工作图像，您可以调整窗口大小进行测试）：

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

原文由 timolawl 发布，翻译遵循 CC BY-SA 3.0 许可协议