如何在引导程序中制作图像适合列答案

【问题标题】：How to make image fit column in bootstrap如何在引导程序中制作图像适合列
【发布时间】：2018-01-28 17:43:10
【问题描述】：

如果有：

<div class = "row">

    <div class = "column-md-6">
        <p>Place holder paragaraph. Place holder paragaraph
         Place holder paragaraph. Place holder paragaraph. 
         Place holder paragaraph. Place holder paragaraph. 
         Place holder paragaraph. Place holder paragaraph. 
         Place holder paragaraph. Place holder paragaraph. 
         </p>
    </div>

    <div class = "col-md-6">
         <img src = "#">
    </div>
</div>

如何使该图像与其左侧段落的确切高度和宽度一致？

【问题讨论】：

你想让图片占据col-md-6的整个区域
是的，这就是我要找的
您希望图像如何在宽度低于991px的设备上显示？

标签： html twitter-bootstrap image css

【解决方案1】：

使用这个，提供背景图片而不是在img标签内提供图片

<div class = "col-md-6 my_img">
     <img src = "#">
</div>

你的 CSS 将是：

.my_img{
  height:300px; /* give your required height */
  background:url('your image url or location');
  background-size:cover;
}

【讨论】：

谢谢，但是我怎么知道它旁边段落的高度（你说给你所需的高度）？
好吧，告诉一件事你想要什么......你想要段落高度或包含段落的列的高度？？
如果你认为你想要段落的高度，那么它取决于里面的文本，这将是一个不好的做法

【解决方案2】：

这就是我在v3 中的做法（我假设你正在使用它）。如果您不希望图像在md 断点（991px）下方显示，只需将hidden-sm 和hidden-xs 类添加到第二个.col-md-6 并删除@media 块，因为它不再需要。

$(window).load(function() {
  $('.has-background img').each(function() {
    $(this).parent().css({
      backgroundImage:"url('"+$(this).attr('src')+"')"
    })
  })
})

.equal-columns {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.equal-columns > * {
  flex:1
}
.has-background {
  background: transparent no-repeat 50% 50% /cover;
}

.has-background img {
  display: none;
}
@media (max-width: 991px) {
 .has-background img {
    display: block;
    margin: 0 -15px;
    visibility: hidden;
  }
  .equal-columns > * {
    flex-basis: 100%;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row equal-columns">
    <div class="col-md-6">
        <p>Place holder paragaraph. Place holder paragaraph.
        <p>Place holder paragaraph. Place holder paragaraph. 
        <p>Place holder paragaraph. Place holder paragaraph. 
        <p>Place holder paragaraph. Place holder paragaraph. 
        <p>Place holder paragaraph. Place holder paragaraph. 
    </div>
    <div class="col-md-6 has-background">
       <img src="http://lorempixel.com/649/150/sports" />  
    </div>
</div>

注意：我使用一个很小的 jQuery 脚本将 src 从 <img> 复制为 background-image 在任何 .has-background 中。如果您希望传递 JavaScript，请手动将 style="background-image:url('URL_OF_IMAGE')" 添加到 <div> 元素中，类为 has-background - 或在 CSS 中设置 background-image 属性值。
注意：您应该将图像裁剪为接近包含段落的<div> 的大小。如果不这样做，图像的大部分区域将被裁剪（从顶部/底部或从左/右，取决于图像和带有段落的 div 的比例，可能会导致像素化）。由于您没有指定任何内容，因此在md 断点下方，我以 100% 的视口宽度和成比例的高度显示图像（因此它不会等于段落。如果您希望它们相等，则可以使用 JavaScript。

【讨论】：