详细信息:我正在使用 bootstrap,试图保持我的图片纵横比并根据屏幕尺寸使其响应。
问题:我已将图片的宽度设置为 18%,高度为自动,因此图片会根据屏幕宽度调整大小,但当屏幕宽度较小时,图片会变得太小分钟,如果我尝试增加宽度 %,那么在正常屏幕尺寸上图片会变得太大。所以我尝试在图片上设置 max-width 和 min-width 显然对图片没有任何影响!
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
是删除 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>
关于html - 最小宽度和最大宽度不适用于图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36716925/