Question

我的网站使用方形表格单元格来显示产品图片。以前的object-fit：cover效果很好，但是在Chrome上似乎不再起作用了？图像的宽度被设置为包含div的宽度，但高度被设置为图像的实际高度，导致出现怪胎显示，其中对象适合度是根据图像自身的溢出尺寸而不是容器的尺寸来计算的

我希望我已包含所有相关代码-我从网站设计者那里继承了此代码，而且我对CSS绝对不精通（我一直在努力教自己维护自己的网站），所以我确定我只是忽略了一些东西。 https://www.charmingsushi.co.uk/collections/all显示了操作中的错误-图片高度为480px，并且正在“覆盖”该480px，而不是较短的容器。

HTML（shopify液体forloop遍历页面上的每个产品）：

<div class="module-table">
 <ul class="grid clearfix collection-grid module-three-quarters">
  <li class="three-per-row centered prod-container">
   <div class="prod-image-wrap">  
    <a href="https://www.charmingsushi.co.uk/products/my-hero-academia-mochimochi-mascots">
     <img src="https://cdn.shopify.com/s/files/1/0988/2550/products/0017227_boku-no-hero-academia-mochi-mochi-tsum-mascot-individuals_x480.jpeg?v=1551836121"/>
    </a>
   </div>
  </li>
  <li class="three-per-row centered prod-container">
   <div class="prod-image-wrap">  
    <a href="https://www.charmingsushi.co.uk/products/riza-hawkeye-nendoroid">
     <img src="https://cdn.shopify.com/s/files/1/0988/2550/products/good-smile-company-riza-hawkeye-nendoroid-4858138296383_x480.jpg?v=1550853867"/>
    </a>
   </div>
  </li>
 </ul>
</div>

CSS：

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

Answer 1

我自己像山雀一样固定-使用css-tricks.com/aspect-ratio-boxes，其中包含代码：

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

我的代码缺少以下位置：.product-image-wrap .img代码中的绝对位置和顶部/左侧：0行。我仍然不知道为什么它能正常工作然后又停止工作，但是哦，它已经修复了，我可以练习写stackoverflow问题了。

Object-fit：cover不再适用于表格单元吗？

1 个答案: