css - 处理具有固定 em 宽度和高度的图像

Question

以下是我在基于 em 的布局中处理图像的方式：

.model {
    width: 14.5em;
    float: left
    }

.model img {
    width: 100%;
    height: auto;
    }

问题是某些图像的纵横比、尺寸不同，并且会影响布局。

所以我试图在 em 中给图像一个固定的大小。

如果我这样做：

.model {
    width: 14.5em;
    float: left
    }

.model img {
    width: 14.5em;
    height: 14em;
    }

高度设置正确，但宽度小于 14.5em。

任何想法为什么？

Answer 1

尝试使用 max- 和 min- 属性：

.model img {
width: 14.5em;
height: 14em;
max-height: 14.5em
min-height: 14.5em
}

为什么不在img标签中定义宽度和高度（页面渲染更快）？

Answer 2

当我们重新调整大小时，图像的宽度和高度会出乎意料，请尝试以下方法：

.model {
    width: 14.5em;
    float: left
    }

.model img {
    max-width: 14.5em;
    height:auto;
    }

除此以外

.model {
    width: 14.5em;
    float: left
    }

.model img {
    width: auto;
    max-height:14.5em;
    }