在 Bootstrap 网格中调整大小时图像元素扭曲 [英] Image elements distorting when resizing in a Bootstrap Grid

问题描述

我有一个 引导网格设置，可以连续显示 4 个视频缩略图(链接到用于播放视频的灯箱)但缩略图被压扁.(共享房屋剧集)我该如何裁剪缩略图?

我现有的代码是

HTML

<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 class="box-watch-internal"><div class="title">第 1 集</div>

</a>

CSS

@media(最小宽度:992px){.col-md-3 {宽度:25%；}}

当我将宽度更新为 33% 时，它为我提供了正确的外观尺寸，但显然使网格失灵了.我不介意我是否必须裁剪图像而不是统一缩小图像，但到目前为止我没有尝试过的代码允许我实现这一点.

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

解决方案

确保我选择了图像源来显示相关 CSS 代码的位置，而不是选择整个 div 类允许我放置 object-fit: 覆盖 标签并让它影响表格中的相关缩略图.

I have a bootstrap grid set up to show 4 video thumbnails in a row (linking to a Lightbox to play the video) but the thumbnails are being squished. (Shared House Episodes) How can I crop the thumbnails instead?

The current code I have in place is

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

When I update the width to 33%, it gives me the correct looking dimensions, but obviously puts the grid out of whack. I don't mind if I have to crop the image rather than uniformly scale it down but no code I have tried so far is allowing me to achieve that.

I replaced the width:25% property with object-fit: cover; and the image just went full size rather than constrained in the column. I also tried adding the 'object-fit' beneath 'width' to use in conjunction but had no result either.

解决方案

Making sure I had the image source selected to show me where the relevant CSS code was rather than having the entire div class selected allowed me to place the object-fit: cover tag and have it effect the relevant thumbnails in the table.

这篇关于在 Bootstrap 网格中调整大小时图像元素扭曲的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！