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

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;
    }