在不同图像方向上的最小高度，最小宽度以填充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

Answer 1

每当您设置max-width或min-width时，请为height: auto和max/min-height添加width:auto。这将告诉CSS引擎按比例调整图像大小。

Answer 2

确定您想要图像高度的屏幕百分比。然后使用 vh 属性。 示例 如果您希望图像的高度在任何给定点占据屏幕高度的1％，请使用 1vh 。

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

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