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

它可以很好地显示带有 overflow hidden 的纵向图像，但对于横向图像，它会压缩宽度。我可以添加其他属性以使其不水平挤压吗？

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

Answer 1

任何时候你设置max-width或min-width，添加height: auto，对于max/min也是如此-height 和 width:auto。这将告诉 CSS 引擎按比例调整图像大小。