我正在为我的图像使用 Bootstrap 。当我使用 visible-xs
和 img-responsive
时,它会在浏览器中显示较小的图像。
但是,当我尝试使用 media query
加载更大的图像时,屏幕只是空白。
我已经检查了图像的位置,它就在那里。
有人可以指出正确的方向,说明为什么没有使用 media query
显示更大的图像吗?
<div class="container">
<div id="my_img"><img id="pic" src="images/flower.jpg" class="img-responsive visible-xs"></div>
</div>
在 CSS 文件中
@media (min-width: 1200px) {
#pic{
background:url('images/flower-1200.jpg') no-repeat;
}
}
最佳答案
如果您使用的是 visible-xs
类,则根据 Bootstrap Docs ,它只会出现在超小屏幕中,隐藏在其余屏幕中。
如果您尝试加载新图像(使用 background
),那么您必须向父 #my_img
申请,因为它没有 >visible-xs
类。
@media (min-width: 1200px) {
#my_img {
background: url('//lorempixel.com/1600/900') no-repeat;
height:900px;
max-width:100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12">
<div id="my_img">
<img id="pic" src="//dummyimage.com/100x100" class="img-responsive visible-xs">
</div>
</div>
</div>
</div>
关于html - 图像未使用媒体查询显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37889620/