-1

我正在尝试编写一个类似于此页面上的标题图像：http ://www.eltrecetv.com.ar/nosotros-a-la-manana 。当您调整页面大小时，请注意该人的图像会发生什么变化 。它保持在同一个地方，它总是居中并且它不会裁剪（在底部有点但不是那么多）。这是我简明扼要的代码：（还有这里的小提琴：https ://jsfiddle.net/wvep5ga1/ ）

html:

<div class="outer">

</div>

CSS：

.outer{
    background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
    background-size:cover;
    background-origin:padding-box;
    background-position:top center;
    min-height:386px;        
}

我发现的问题是，当我调整浏览器窗口的大小时，div 压缩到只能看到男人的脸的程度，这与原始页面中发生的情况相反，您始终可以看到肩膀。我不知道我是否正确地解释了这一点，但基本上在调整窗口大小时，div 的高度变化比它在原始页面上的变化快得多，这会影响页面的其余部分，因为男人的形象必须始终保持在同一个地方，并且必须始终具有相同的纵横比。我已经解决了纵横比问题，但是我在调​​整窗口大小时 div 的高度压缩和扩展过多。

我认为原始页面是使用 Drupal 7 完成的。但我想要的是一个可以做到这一点的css片段。我知道这是可能的，我已经尝试了几个小时，但我错过了一些东西。我知道原始页面使用了许多具有不同分辨率的图像，但这不是问题。

希望有人可以提供帮助。我期待着您的评论。

提前致谢！

4

1 回答 1

1

请参阅更新的小提琴：https ://jsfiddle.net/wvep5ga1/3/

只需添加

background-size: 100%;
background-repeat: no-repeat;

像这样：

.abc{    
    background:url(http://eltrecetv.cdncmd.com/sites/default/files/styles/1440x386/public/nosotrosalamanana.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-origin: padding-box;
    background-position:top center;
    min-height:386px;        
}
于 2016-02-19T17:59:35.950 回答