Question

Here is how I handle images in my em based layout:

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

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

The problem is some images differ in aspect ratio, dimensions and it brakes the layout.

So I am trying to give images a fixed size in em.

If i do this:

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

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

the height is set correctly but the width is smaller than 14.5em.

Any ideas why?

Answer 1

Images are going unexpected width and height when we re-sizing try the below methods:

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

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

otherwise

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

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