如何为img标签设置max-height并解决属性值无效问题

问题原因 #

CSS中所有非零的长度属性值必须指定单位，你写的max-height: 300没有添加单位（最常用的像素单位为px），浏览器无法识别该数值对应的长度类型，所以会标记为无效属性值。

正确设置方法 #

你需要给max-height补充对应单位，同时加上height: auto保证图片宽高比不会变形。不建议直接修改全局.w-100类的样式，避免影响其他使用该类的元素，更稳妥的做法是给需要设置的图片新增自定义类：

1. 给img元素添加自定义类，比如命名为fixed-ratio-img：

<img class="d-block w-100 fixed-ratio-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhE...">

2. 为自定义类添加样式：

.fixed-ratio-img {
    max-height: 300px;
    height: auto;
    /* 可选配置：如果希望图片完整展示在最大高度范围内，多余区域留空，可加下面这行 */
    object-fit: contain;
}

如果你确实需要全局修改.w-100类的样式，直接补全单位即可：

.w-100 {
    width: 100% !important;
    max-height: 300px;
    height: auto;
}

内容的提问来源于stack exchange，提问作者Randy