Question

我的首页上有一个div，它与Twitter Bootstrap网格系统分成两部分。每当第二个网格（span9）高于第一个网格（span3）时，图像就会精美地填满span9（图像有width:100%）。

enter image description here

如果我调整页面大小，span3中的文字会占用更多行，并使整个div高于图片，从而产生以下结果：

enter image description here

当然，我希望图像能够填满div的整个高度，而不是垂直拉伸图像（嘿，它不再是90s了！）。但是，我无法通过CSS找到如何做到这一点，而没有图像突破div的宽度。

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

我尝试设置一个小提琴，但由于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

封面值指定背景图像的大小应如此它确保两个尺寸尽可能小大于或等于容器的相应大小。

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

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

Answer 2

由于Danielwinter的答案不起作用，我不得不继续自己玩，并发现以下情况。

我知道移动样式将从767px浏览器宽度及以下应用，并且图像必须从浏览器宽度1223px及以下调整大小。

在HTML中，我添加了一个新的div，其中包含类banner_image。此div会将图片设为background，size设置为cover。

<强> CSS

.banner_image {
   background: url(http://kursus.billetten.dk/wp-content/themes/kurser/img/header_image.jpg) no-repeat;
   background-size: cover;
}

一旦图像应该使用新div调整大小，正常图像（放入<img> - 标记）应该会消失。为了确保图像没有静态高度，我甚至将带有文本的div的高度调整到具有一些jQuery的图像高度。为了防止图像在调整窗口大小时保持其大小，我将完整的代码复制粘贴到窗口调整大小时运行的函数中。

<强>的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();
    }
});

通过这种方式，当调整窗口大小时，图像会调整大小，原始<img>在某个宽度之间被隐藏，只会为用户创建整体最佳体验。

使用全高图像填充div

2 个答案: