Question

我正在尝试编写类似于此页面上的标题图片：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压缩的问题，并且在windows调整大小时扩展太多了。

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

希望有人可以提供帮助。我期待着你的意见。

提前致谢！

Answer 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;        
}

标题图像响应中心

1 个答案: