Question

我有一个背景覆盖图像，需要响应屏幕设备。

bg过度需要保持全宽，但放置100％宽度只会在小型设备上产生溢出，在较大的设备上产生下溢。

感谢帮助。

请参阅我的js fiddle

.col-md-3{
    width:30%;
}
img{
    width:100%;
}
.brand-category{
    position: relative;
}
.brand-text{
    position: absolute;
    background-color: rgba(130,130,130,0.5);
    font-weight: 100;
    font-size: 0.9em;
    color: #fff;
    text-align: center;
    bottom: -10px;
    padding: 5px;
}

Answer 1

填充导致溢出

<div class="col-md-3 brand-category">
  <p class="brand-text"><span>Category</span></p>
  <a href=""><img src="http://paulobriendesign.com/img/paul-obrien.jpg" class="img-responsive" alt=""></a>
</div>

CSS

.col-md-3{
  width:30%;
}
img{
  width:100%;
}
.brand-category{
  position: relative;
}
.brand-text{
  position: absolute;
  width: 100%;
  background-color: rgba(130,130,130,0.5);
  font-weight: 100;
  font-size: 0.9em;
  color: #fff;
  text-align: center;
  bottom: -10px;
}
.brand-text span {
  display: block;
  margin: 5px;
}

http://jsfiddle.net/XWfN4/

Answer 2

只需将display:block;添加到img CSS

即可

img{
    width:100%;
    display:block;
}

背景覆盖有响应图像

2 个答案:

Demo Without

Demo With