固定高度但响应图像

Question

我有一组可变大小的徽标。我已将它们全部设置在50px的同一高度，宽度为auto：

.img-logo {
   width: auto;
   height: 50px;
}

这可以正常工作，直到调整窗口大小。调整窗口大小时，更宽的徽标会在其容器外部流动。

我希望徽标缩小以适应其容器宽度。我试图用max-width来实现这个目的：

.img-logo {
   max-width: 100%;
   width: auto;
   height: 50px;
}

这可行，但由于高度属性保持50px，因此宽高比会受到影响。

有什么想法吗？

Answer 1

使用固定的height和变量width，可能会发生以下任何一种情况。

1. img被拉伸以适应可变宽度并偏斜纵横比。
2. 父级img被裁剪（overflow:hidden），但宽高比保持不变。

所以你也可以让img做出回应。但是它不会保持恒定的高度，同时保持纵横比不变。

Answer 2

我认为当窗口太小并且你不想改变图像大小时，不可能保持它的大小。为什么不试试@media，它可以在不同条件下提供不同的CSS样式。