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

【问题标题】：min-width and max-width not working on image最小宽度和最大宽度不适用于图像
【发布时间】：2016-08-11 13:05:25
【问题描述】：

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

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

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

如果收到任何帮助，我们将不胜感激！

【问题讨论】：

尝试将!important 添加到此规则：min-width: 200px !important; max-width: 320px !important;。
它的工作！非常感谢。
除了!important，您可以尝试的另一个选项是删除<img> 元素本身的宽度并将其移至CSS。如果可行，我相信这将是一个更好的解决方案。

标签： html css twitter-bootstrap twitter-bootstrap-3 width

【解决方案1】：

替代!important 的另一种选择是删除<img> 元素本身上的width 并将其移至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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

你可以通过给出 width:auto 来试试这个

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

【讨论】：

【解决方案4】：

使用

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

【讨论】：