Loops 填充div的不同图像方向上的最小高度、最小宽度

在bigcartel帐户中，我在一个循环中运行的div中有一个图像。HTML格式基本上如下所示：

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

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

我试图通过条件CSS javascript运行它，但Bigcartel似乎没有运行它。

---

无论何时设置

max width

或

min width

，添加

height:auto

，以及

max/min height

和

width:auto

，url都是。这将告诉CSS引擎按比例调整图像大小。

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

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

---

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

从第一条规则开始，您有

最大宽度：210px

，从最后一条规则开始，您有

最小宽度：210px

。这转化为宽度：210px，因为它不能大于或小于这个值。您需要重新考虑调整大小的逻辑。。（尝试解释您希望发生的事情，以便我们提出解决方案）是否可以在图像标签上设置宽度/高度？或者添加其他CSS类，如“横向”或“纵向”？

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