loops - 不同图像方向上的最小高度，最小宽度以填充 div

Question

在一个 bigcartel 帐户中，我在 div 中有一个图像，它通过一个循环运行。HTML格式基本上是这样的：

<ul>
  <li class="product">
    <a href="...">
     <img />
     <div class="product_info"></div>
    </a>
  </li>
</ul>

CSS有一堆预设代码，但我在最后添加了它以覆盖它：

.product, .product img {
  max-width:210px;
}
.product{
  height:210px;
  overflow:hidden;
}
.product img{
  min-width:210px;
  min-height:210px;
}

它可以很好地显示带有溢出隐藏的纵向图像，但对于横向图像它会挤压宽度。我可以添加另一个属性以使其不会水平挤压吗？

我试图通过有条件的 CSS javascript 运行它，但 Bigcartel 似乎没有运行它。网址是http://atwatertest.bigcartel.com

score 0 · Accepted Answer

任何时候你设置max-widthor min-width，添加height: auto，同样为max/min-heightand width:auto。这将告诉 CSS 引擎按比例调整图像大小。

score 0 · Accepted Answer

弄清楚您希望图像高度占据屏幕的多少百分比。然后使用vh属性。示例如果您希望图像的高度在任何给定点占屏幕高度的 1%，请使用1vh。

img {
height: 1vh;
width: 1vh;
}

这意味着图像将始终占据屏幕的 1%。这使得它相应地调整大小。

2 回答 2