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

【问题标题】：Images not scaling with css auto width图像不使用 css 自动宽度缩放
【发布时间】：2013-07-03 21:28:18
【问题描述】：

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

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

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

我应该怎么做才能达到缩放效果？非常感谢！

【问题讨论】：

【解决方案1】：

使用 img 作为图像而不是图像以在其中应用样式

img{your style here}

【讨论】：

嗯...“图像”是我正在努力设计样式的 Wordpress 插件代码的一部分。恐怕这可能很难。见这里：jsfiddle.net/wVu8x
在图像标签中添加类，或者您可以使用其父类即 .parentclass img{ your style} 定位图像标签，或者您可以使用 :nth-child 选择器..

【解决方案2】：

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

img {
  max-height: 100px;
}

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

【讨论】：