css - 图像不使用 css 自动宽度缩放

Question

我在我的页面中添加了以下代码：

image {
    margin: 0 2px 0 0;
    height: 100px;
    width: auto !important;
    overflow: hidden;
    text-align: center;
}

我想将所有图像缩放到 100px 的最大高度，并让浏览器相应地调整它们的高度。但结果是图像仅被裁剪到 100px 高度，其余部分被隐藏。

我应该怎么做才能达到缩放效果？提前谢谢了！

Answer 1

将 img 用于图像而不是图像以在其中应用样式

img{your style here}

Answer 2

您可以通过以下方式达到您想要的效果：

img {
  max-height: 100px;
}

您不需要溢出、文本对齐或宽度属性。您可以保留边距属性，但上面的代码解决了您的问题。