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

当我们重新调整大小时，图像的宽度和高度超出预期，请尝试以下方法:

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