twitter-bootstrap 最小宽度和最大宽度不适用于图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36716925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
min-width and max-width not working on image
提问by programmingandroid
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!
问题：我已将图片的宽度设置为 18%，高度为自动，因此图片会根据屏幕宽度调整大小，但是当屏幕宽度较小时，如果我尝试增加宽度 %，图片会变得太小和太小然后在正常的屏幕尺寸上，图片会变得太大。所以我试图在图片上设置 max-width 和 min-width 显然对图片没有任何影响！
html code :
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 code :
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
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!
收到的任何帮助将不胜感激！
采纳答案by Mohit Bhardwaj
try adding !importantto this rule: min-width: 200px !important; max-width: 320px !important;.
尝试添加!important到此规则：min-width: 200px !important; max-width: 320px !important;。
回答by timolawl
Another option instead of resorting to !importantis to remove the widthon the <img>element itself and move it to CSS.
另一种选择，而不是诉诸!important是去掉width了对<img>元素本身并将其移动到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>回答by Neil Bannet
You can try this by giving width:auto
您可以通过提供 width:auto 来尝试此操作
#mypic
{
margin-right : auto;
margin-left : auto;
min-width : 200px;
max-width : 350px;
width:auto;
}
回答by Devidas Kadam
use
利用
.card img.img-responsive#mypic{
margin-right : auto;
margin-left : auto;
min-width : 200px;
max-width : 350px;
}
