Question

如果有：

<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>

如何使该图像成为左侧段落的确切高度和宽度？

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

Answer 2

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

＆＃13;

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

＆＃13;

.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%;
  }
}

＆＃13;

<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>

＆＃13;

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

如何在引导程序中使图像适合列

2 个答案: