Html 在引导网格中调整大小时图像元素扭曲

我有一个最多显示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>

当我将宽度更新为33%时，它给出了正确的外观尺寸，但显然使网格失去了正常。我不介意是否必须裁剪图像，而不是均匀地缩小它，但到目前为止，我尝试过的代码都不允许我做到这一点

---

我将

width:25%

属性替换为

对象匹配：cover

和图像只是完全变大，而不是在列中约束。我还尝试在“宽度”下添加“对象匹配”以结合使用，但也没有结果。

确保选择了图像源以显示相关CSS代码的位置，而不是选择了整个div类，这样我就可以放置

对象匹配：cover

标记并使其影响相关的缩略图表格。

“缩略图被压扁了”\uu如果您的重点是缩略图图像发生了什么，那么这也是您的代码应该处理的问题\uuu而不是列的宽度\uuuu，因为引导程序会自动处理这些问题，但我不知道有什么方法可以实际裁剪图像！尝试使用

img-width

和/或

img-max-width

\uGood LuckI应该说使用您已经设置的image类

box-watch-img

\uuu使用特定于该元素的CSS首先考虑裁剪图像，而不是调整@Joseph的大小。如果这是您真正想要实现的，您可以想尝试一些类似于

img min width

和

img{overflow:hidden}

的东西，但我一点也不确定，我只是建议一个实验性的方向让你去做；）谢谢@Maik，但我不完全确定我需要把什么放在哪里。我是否需要将img标记更改为“”并将img“{overflow:hidden}”放在css端？我不确定你是否在浏览网页，但是CSS影响了“@media”，所以不确定特定的img标签是否能在我的CSS面板中工作……谢谢你的建议@Maik，我已经解决了。我正确地添加了对象匹配：封面。我只是检查了div类，并在其中添加了css属性，而不是imgsrc。

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