html - 用全高图像填充 div

Question

我有一个网站，在首页上有一个 div，它被 Twitter Bootstrap 网格系统分成两部分。每当第二个网格 (span9) 高于第一个 (span3) 时，图像会漂亮地填充 span9(图像有 宽度:100%).

但是，如果我调整页面大小，span3 中的文本会占用更多行并使整个 div 高于图像，结果如下:

当然，我希望图像填满 div 的整个高度，而不垂直拉伸(stretch)图像(嘿，现在已经不是 90 年代了!)。但是，我无法找到如何通过 CSS 执行此操作，同时图像的宽度不会超出 div。

我想要的是每次 div 变窄但变高时，图像从右侧裁剪/裁剪并垂直增长。

我尝试设置一个 fiddle ，但因为 Bootstrap 跳转到小窗口中的移动 CSS，我无法复制它，除非你使用全屏并调整浏览器大小:Fiddle

当然你也可以只看live .

Answer 1

检查你的 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

The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.

这应该是您问题的完整示例:

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