Question

我有如下代码-包含全角图片的列。

<div class="col-3">
    <img src="..." class="w-100" />
    <div>Name</div>
</div>

由于图像的大小可以不同，因此不能保证图像下方的内容将显示在一行中（图像的高度应根据图像的宽度而有所不同）。

换句话说，当.col中的图像宽度为200 px时，高度应为200 px，依此类推（宽度=高度）。

Answer 1

带有CSS的示例1：

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');

.img-prev {
  height: 200px;
  overflow: hidden;
}

.img-prev img {
  max-height: 100%;
  width: auto;
  max-width: inherit;
  margin: auto;
  display: block;
}

<div class="container">
    <div class="row">
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538356913997-b04286765811?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39e83600a508d87be2ea636e02f30f95&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538333785596-1cc0b5e03551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c942fc493dad02801a99aa191414a535&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538379585867-44bf200a3d25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29782178fb2019f60bee12c2fcfacff4&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538367735494-5e6cc0ff555a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3066861f0cf81849de20853676dee717&auto=format&fit=crop&w=600&q=60" alt="" class="img-fluid">
        </div>
      </div>
    </div>
  </div>

示例2 html：

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  
  <div class="container">
    <div class="row">
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538356913997-b04286765811?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39e83600a508d87be2ea636e02f30f95&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538333785596-1cc0b5e03551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c942fc493dad02801a99aa191414a535&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538379585867-44bf200a3d25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29782178fb2019f60bee12c2fcfacff4&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538367735494-5e6cc0ff555a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3066861f0cf81849de20853676dee717&auto=format&fit=crop&w=600&q=60" alt="" height="200" width="150">
        </div>
      </div>
    </div>
  </div>

带有jq的示例3：

var imgs = $('.img-prev>img');
imgs.each(function(){
  var item = $(this).closest('.img-prev');
  item.css({
    'background-image': 'url(' + $(this).attr('src') + ')', 
    'background-position': 'center center',            
    '-webkit-background-size': 'cover',
    'background-size': 'cover', 
  });
  $(this).hide();
});

.img-prev {
  height: 200px;
}

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  
  <div class="container">
    <div class="row img-list">
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538356913997-b04286765811?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39e83600a508d87be2ea636e02f30f95&auto=format&fit=crop&w=600&q=60" alt="">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538333785596-1cc0b5e03551?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c942fc493dad02801a99aa191414a535&auto=format&fit=crop&w=600&q=60" alt="">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538379585867-44bf200a3d25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=29782178fb2019f60bee12c2fcfacff4&auto=format&fit=crop&w=600&q=60" alt="">
        </div>
      </div>
      
      <div class="col-4 mb-2">
        <div class="img-prev">
          <img src="https://images.unsplash.com/photo-1538367735494-5e6cc0ff555a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3066861f0cf81849de20853676dee717&auto=format&fit=crop&w=600&q=60" alt="">
        </div>
      </div>
    </div>
  </div>

Answer 2

尝试这个

<div class="container">           
  <img src="loginBackground.jpg" class="img-fluid" alt="Cinque Terre" width="200" height="200"> 
</div>

Bootstrap：响应式图像对齐

2 个答案: