css - 如何用图像填充列

Question

假设我在 bootstrap 3 中有一个示例布局:

<div class="row">
   <div class="col-md-6">
      <div class="row">
           <img class="filler" src="some/other/img.jpg" />
      </div>
      <div class="row">
           <img class="filler" src="some/other/img.jpg" />
      </div>
   </div>
   <div class="col-md-6">
       <img class="main-img" src="some/link.jpg" style="width: 100%; height: auto" />
   </div>
</div>

如何使带有 filler 类的图像自动缩放以获得与带有 main-img 类的图像相同的高度。

我想达到如下效果:

 ________ ____________
|.filler |            |
|________|auto-scale  |
|.filler |width: 100% |
|________|____________|

只有 css 才能实现该事件吗？

编辑:我的意思是高度，不是宽度(我的错)；

Answer 1

基本上您没有对 Bootstrap HTML 标记给予足够的重视，这对于保持“智能”和响应非常重要。

.filler, 
.main-img {
  width: 100%; 
  height: auto
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="row-fluid">
  <div class="col-md-6">
    <img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
    <img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" />
  </div>
  <div class="col-md-6">
    <img class="main-img" src="http://www.gettyimages.com/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" />
  </div>

---

在我们在评论中进行了简单的谈话之后，决定用一些代码来支持我所说的话。使用 jQuery 完成，因为它更快(对我而言)。如果你的元素中还没有 jQuery，你应该用 javascript 重写它。没有经过全面测试，但我看不出有任何理由不能跨浏览器、跨平台工作:

document.initPictures = function() {
  $('.resizeMe').css({
    'height': $('#theContainer .col-sm-6').eq(1).height() + 6,
    'display': 'flex',
    'flex-direction': 'column',
    'transition': 'height .4s cubic-bezier(0.55, 0, 0.55, 0.2)'
  });
  $('.resizeMe img').each(function() {
    var src = $(this).attr('src');
    $('.resizeMe').append('<div style="flex-basis: 50%; background-image: url(' + src + '); background-size:cover; background-position: center center"' + '</div>');
    $(this).remove();
  })
};
document.resizePictures = function() {
  if ($('#theContainer').outerWidth() > 768) {
    $('.resizeMe').css({
      'height': $('#theContainer .col-sm-6').eq(1).height()
    });
  } else {
    $('.resizeMe').css({
      'height': $('.resizeMe').outerWidth()
    });
  }
};
$(window).resize(function() {
  document.resizePictures();
});
document.initPictures();

.main-img {
  width: 100%;
  height: auto
}
#theContainer {
  margin-top: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="row-fluid" id="theContainer">
  <div class="col-sm-6 resizeMe">
    <img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
    <img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" />
  </div>
  <div class="col-sm-6">
    <img class="main-img" src="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg" />
  </div>

注意:如果有人能向我解释为什么 $('#theContainer .col-sm-6').eq(1).height() 是 6px 在页面加载时比之后小，我真的很高兴。