我有一个网站的首页上有一个div，它被Twitter引导网格系统一分为二。每当第二个网格（span9）高于第一个网格（span3）时，图像就会漂亮地填充span9（图像的宽度为100%）。
然而，如果我调整页面大小，span3中的文本会占用更多的行，并使整个div高于图像，结果如下：
当然，我希望图像填充div的整个高度，而不垂直拉伸图像（嘿，不再是90年代了！）。然而，我无法找到如何通过CSS做到这一点，而不让图像在宽度上突破div。
我想要的是图像从右侧裁剪/剪辑，并在div变宽但变高时垂直增长。
我试着设置一个fiddle，但是因为Bootstrap在小窗口中跳转到移动CSS，所以我无法复制它，除非您使用全屏并调整浏览器的大小：fiddle
当然，你也可以现场观看。
检查您的span-9是否已经获得了父级的完整高度（它应该），如果是这样，请使用css将图像设置为背景图像（甚至是一个简短的内联style=“background image:url（…）”），然后使用
.fullheightimg{
background-size: cover;
background-positon: center right;
}
参考资料和Mozilla的进一步阅读：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
封面值指定背景图像的大小应尽可能小，同时确保两个尺寸都大于或等于容器的相应大小。
这应该是一个全面的例子，你的问题：
@media (min-width: 970px) {
.banner .row-fluid {
display: table;
}
.banner .row-fluid .span3, .banner .row-fluid .span9 {
float: none;
display: table-cell;
}
}
.banner .row-fluid .fullimage {
background-image: url('http://santamonicacentric.com/site/wp-content/uploads/2014/07/internet-famous-grumpy-cat-just-landed-an-endorsement-deal-with-friskies.jpg');
background-size: cover;
background-position: center left;
min-height: 150px;
}
由于丹尼尔温特的回答不起作用，我不得不继续自己踢球，并发现以下情况。
我知道移动风格将应用于767px及以下的浏览器宽度，图像必须从1223px及以下的浏览器宽度调整大小。
在HTML中，我添加了一个新的div，带有classbanner\u image。此div将以背景的形式获取图像，并将大小设置为封面。
CSS
.banner_image {
background: url(http://kursus.billetten.dk/wp-content/themes/kurser/img/header_image.jpg) no-repeat;
background-size: cover;
}
正常图像（与一起放入）
jQuery
var windowWidth = $(window).width();
if(windowWidth > 768 && windowWidth < 1223){
$('.banner_image').show();
$('.banner_image').height($('.banner .span3').height());
$('.banner .span12 img').hide();
}
else {
$('.banner_image').hide();
$('.banner .span12 img').show();
}
$(window).resize(function() {
var windowWidth = $(window).width();
if(windowWidth > 768 && windowWidth < 1223){
$('.banner_image').show();
$('.banner_image').height($('.banner .span3').height());
$('.banner .span12 img').hide();
}
else {
$('.banner_image').hide();
$('.banner .span12 img').show();
}
});
通过这样做，当窗口调整大小时，图像会调整大小，原始
