在不同图像方向上的最小高度，最小宽度以填充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％。这使得它相应地调整大小。