我想实现以下目标：
哪里有背景图像,上面有文字(文字位置为bootstrap offset-6 col-6)
并为它提供响应.
问题是,与传统背景不同,我确实关心背景图像是如何截断的,无论宽度如何,我都需要手机可见.
我试过了：
背景：url(background-photo.jpg)中心覆盖无重复固定;
而How to get div height to auto-adjust to background size?上的隐形img技巧
在所有情况下,手机都会被截断
将不胜感激
编辑：
根据要求 – 原始的div结构是：
但我把它改成任何有效的东西都没有问题……
最佳答案
使用JavaScript解决方案
我知道这不是一个仅使用CSS的CSS解决方案,但是当我们寻找CSS时,它可以作为临时解决方案提供帮助.
HTML将与您发布的相同：
ID为“饥饿”的div的CSS如下所示：
#hungry {
background:url('http://i.stack.imgur.com/7xasp.jpg') no-repeat center center ;
background-size:cover;
width:100%;
}
最后,使用JavaScript(我使用jQuery使其更容易),您可以根据屏幕宽度调整#hungry的高度：
// you know the size for your image
imageWidth = 1919;
imageHeight = 761;
imageProportion = imageHeight/imageWidth;
function resizeJumbo() {
$("#hungry").css({ height: $(window).width() * imageProportion });
}
$(window).on("resize",function() {
resizeJumbo();
});
$(document).ready(function() {
resizeJumbo();
});
你可以看到一个关于这个小提琴的演示：http://jsfiddle.net/hyfz0Lga/.
仅限CSS的解决方案
只需稍微更新饥饿的div的CSS：
#hungry {
background:url('http://i.stack.imgur.com/7xasp.jpg') no-repeat center center ;
background-size:cover;
width:100%;
padding-top:20%;
padding-bottom:20%;
}
你可以看到它在这里工作：http://jsfiddle.net/hyfz0Lga/1/.
为什么填充顶部：20％和填充底部：20％？
这些值与图片的大小以及它们之间的比例有关.在您的情况下：宽度= 1919和高度= 761,因此宽度和高度之间的比例是(761/1919)* 100 = 39.65％.只需在顶部添加一半的值,在底部添加一半的值,然后文本将始终保持在中间,并且图片将始终成比例.
我知道它有点“hacky”并且知道一些数据,但它似乎运行得相当好.
