Question

我有以下代码：

<div class='row front-page-img' style="background-image:url('http://img2-3.timeinc.net/people/i/2014/news/140428/coachella-crowd-600.jpg')">
</div>
<div>Below image</div>

.front-page-img {
    background-size: 100%;
    width: 100%;
    height:400px;
    margin: 0;
    opacity: 0.4;
    background-position: 0px -200px;
    background-repeat: no-repeat;
}

我很满意我所看到的。也就是说，我喜欢我现在拥有的图像部分。我不喜欢的两件事情如下：

当我缩小屏幕时，img会被推高并随着屏幕变小而消失。我希望它始终具有相同的图像部分，但只是按比例缩小。
由于某种原因，图像下方有空白区域，现在允许其他元素跟随图像。

任何人都知道我做错了什么以及如何解决这个问题？稍后，我想在此图像上添加一个输入选项卡，以改变方法。谢谢！

jsFiddle

Answer 1

将CSS更新为以下内容。

 {% for Element in array %}
<a href ="{{ path('root_1', {'idElement':Element.idElelment}) }}">{{'idElement':Element.idElelment}}</a>

 {%endfor%}

通过将高度设置为0，我们可以使用padding-bottom来保持固定比率，因为当您使用基于百分比的填充时，它与元素宽度相关。

Answer 2

你可以试试这个： -

.front-page-img {
background-size:cover;
height:400px;
opacity: 0.4;
background-position: 0px -200px;
background-repeat: no-repeat;

}

Answer 3

这可以更好地满足您的需求。

background-position: center  bottom;

Answer 4

只需将Bootstraps img-responsive类与内嵌图像一起使用即可。如果您不希望显示图像的上半部分，只需裁剪图像。

＆＃13;

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);

.front-page-img {
  opacity: .4; 
}

.front-page-img > img {
  width: 100%;
}

＆＃13;

<div class="front-page-img">
  <img class="img-responsive" src="http://img2-3.timeinc.net/people/i/2014/news/140428/coachella-crowd-600.jpg" />
</div>

<div>Below image</div>

＆＃13;

CSS背景位置在屏幕较小时推送内容

4 个答案: