Question

我有一个bootstrap grid set，最多可以连续显示4个视频缩略图（链接到灯箱以播放视频），但是缩略图已被压缩。（共享房屋集）如何代替缩略图？

我当前拥有的代码是

HTML

<div class="col-md-3 col-sm-6 col-xs-6">
  <div class="box-watch">
    <a id="videoid" href="#" description="videodescription." ref="videourl" class="watch-video" type="youtube" >
      <div class="box-watch-img">
        <img src="imagethumbnail.jpg" />
      </div>
      <div class="box-watch-internal">
        <div class="title">Episode 1</div>
      </div>
    </a>
  </div>
</div>

CSS

@media (min-width: 992px){
  .col-md-3 {
    width: 25%;
  }
}

当我将宽度更新为33％时，它为我提供了正确的外观尺寸，但显然使网格不适合使用。我不介意是否必须裁剪图像而不是均匀缩小图像，但是到目前为止我还没有尝试过让我实现这一目标的代码。

我用width:25%替换了object-fit: cover;属性，并且图像只是变大了，而不是被限制在列中。我还尝试在“宽度”下方添加“对象适合”以结合使用，但也没有结果。

Answer 1

确保已选择图像源来向我显示相关CSS代码的位置，而不是选择整个div类，这使我可以放置object-fit: cover标记，并使其影响表格中的相关缩略图。

在Bootstrap网格中调整大小时图像元素变形

1 个答案: