Css 对象适合：盖不再在TableCell上工作？

我的网站使用方形表格单元格来显示产品图像。以前的对象适合：封面工作良好，但这似乎不再是工作在铬？图像的宽度被设置为包含div的宽度，但高度被设置为图像的实际高度，从而导致一个古怪的显示，其中对象适合度是根据图像自身的溢出尺寸而不是容器尺寸计算的

我希望我已经包含了所有相关的代码——我从网站设计师那里继承了这些代码，而且我对CSS绝对不是超级熟练（我一直在努力自学如何维护自己的网站），所以我肯定我忽略了一些东西。显示操作中的错误-图像高达480px，并且“覆盖”了该480px，而不是较短的容器

HTML（shopify liquid forloop在页面上的每个产品上进行迭代）：

---

像山雀一样修复了它-使用css-tricks.com/aspect-ratio-box，其中包含以下代码：

.aspect-ratio-box-inside 
{ position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
} 

---

我的代码在.product image wrap.img代码中缺少位置：绝对和上/左：0行。我仍然不知道它为什么会工作，然后停止工作，但是哦，它是固定的，我练习写堆栈溢出问题？

你能用示例值替换模板值（比如

{{product.url}}

）吗？这将帮助人们重现你的问题。谢谢@araraonline我现在已经这样做了-找不到任何类型的创建通用示例的样式指南，所以我只是将其更改为示例页面中的第一对实际值，希望这样更好？谢谢你的提示！那更好！现在，我认为代码非常重要。这是你一直在寻找的答案。因为时间关系，我想我不能回答你，但是，祝你好运@araraonline啊，我之所以包括所有用于生成问题div的代码，部分原因是我不知道是哪个部分导致了问题-我想这意味着我应该从头开始重写它，但是。。。芬吉斯生气地说，在我花几个小时重做之前，有人可以指出这个问题？谢谢你的帮助！我自己修复了它，就像一个山雀一样-使用它，在{position:absolute；top:0；left:0；width:100%；height:100%；}我的代码在.product image wrap.img代码中缺少position:absolute和top/left:0行。我仍然不知道它为什么工作，然后停止工作，但哦，好吧，它是固定的，我得到练习写问题？

$gutter: 8px;

.module-table {
  display: table;
  width: 100%;
  margin: 0;
  padding: 0;
}

.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.row { @extend .clearfix; }

.row {
  margin-left: -$gutter;
  margin-right: -$gutter;
  margin-bottom: $gutter;
  clear: both;
} 

.column {
  float: left;
  padding-left: $gutter;
  padding-right: $gutter;
  padding-bottom: $gutter;
}

.grid { 
  @extend .row; 
}

.grid > li {
  @extend .column;
}

.collection-grid {
  padding: 0;
  margin-bottom: 50px;
}

.module-three-quarters {
  display: table-cell;
  width: 75%;
  padding-left: $gutter;
}

.column.third { width: 33.3%; }

.three-per-row {
  @extend .column.third;
}

.centered { text-align: center; }

.prod-container {
  position: relative;
  box-sizing: border-box;
}

.prod-container:before {
  content:"";
  display: block;
  padding-top: 100%;
}

.prod-image-wrap {
    background: rgba(white, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: $gutter 0 0 $gutter;
  overflow: hidden;
}

.prod-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aspect-ratio-box-inside 
{ position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}