高さは固定されていますが、反応する画像

Question

私は可変サイズのロゴがあります。私はautoの幅50pxの同じ高さにそれらすべてを設定している：

.img-logo { 
    width: auto; 
    height: 50px; 
} 

ウィンドウのサイズが変更されるまで、これが正常に動作します。ウィンドウのサイズが変更されると、より広いロゴがコンテナの外側に流れます。

ロゴをコンテナの幅に合わせて縮小したいと思います。私は、最大幅でこれを達成しようとしている：

.img-logo { 
    max-width: 100%; 
    width: auto; 
    height: 50px; 
} 

これは動作しますが、アスペクト比が高さプロパティ残りは50pxのために危険にさらされています。

アイデア？

Answer 1

固定heightと変数のいずれかが発生する可能性があります。

1. imgは、可変幅に対応して縦横比を歪ませるように引き伸ばされます。
2. imgは親によって切り取られますが（overflow:hidden）、アスペクト比はそのまま維持されます。

したがって、imgも反応的にすることができます。しかし、アスペクト比を損なわずに一定の高さにすることはできません。

Answer 2

ウィンドウが小さすぎてイメージのサイズを変更したくない場合、サイズを維持することは不可能だと思います。異なる条件で異なるCSSスタイルを提供できる@mediaを試してみてください。