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

【问题标题】：Image elements distorting when resizing in a Bootstrap Grid在引导网格中调整大小时图像元素扭曲
【发布时间】：2019-11-11 10:19:28
【问题描述】：

我有一个 bootstrap grid set 最多可以连续显示 4 个视频缩略图（链接到灯箱以播放视频），但缩略图被压缩了。（Shared House Episodes）如何改为裁剪缩略图？

我当前的代码是

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% 时，它给了我正确的外观尺寸，但显然使网格不正常。我不介意我是否必须裁剪图像而不是统一缩小它，但到目前为止我尝试过的任何代码都无法实现这一点。

我用object-fit: cover; 替换了width:25% 属性，图像就变成了全尺寸，而不是限制在列中。我也尝试在 'width' 下方添加 'object-fit' 以结合使用，但也没有结果。

【问题讨论】：

"缩略图被压扁" _如果您的重点是缩略图发生的事情，那么这也是您的代码应该处理的 _ 而不是宽度col _ 因为 Bootstrap 会自动处理它 _ 但我不知道有什么方法可以实际裁剪图像！试试img width 和/或img max-width _Good Luck
我应该说使用你已经设置的图像类box-watch-img _ 首先使用特定于该元素的 CSS
更多地考虑裁剪图像而不是调整@Joseph _ 如果这确实是您想要实现的目标，您可能想尝试类似img min-width 和img {overflow: hidden} 的方法可能但我对此完全不确定 _ 我只是建议你研究一个实验方向； )
感谢@Maik，但我不完全确定我需要在哪里放什么。我是否需要更改我的 img 标签以读取 '' 然后将 img '{overflow:hidden}' 放在我的 css 端？我不确定您是否正在查看网页，但 CSS 正在影响“@media”，因此不确定特定的 img 标签是否可以在我的 CSS 面板中工作...
感谢您的建议@Maik，我已经想通了。我添加 object-fit:cover 是对的。我只是在检查 div 类并将 css 属性添加到其中，而不是专门添加 img src。

标签： html css wordpress twitter-bootstrap

【解决方案1】：

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

【讨论】：