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 未満です。

理由はありますか？

score 0 · Accepted Answer

max- および min- プロパティを使用してみてください。

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

タグで幅と高さを定義しないのはなぜですかimg(ページのレンダリングは高速です)。

score 0 · Accepted Answer

サイズを変更すると、画像の幅と高さが予期しないものになり、以下の方法を試してください。

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

2 に答える 2