Feste Höhe, aber reaktionsschnelle Bilder

Question

Ich habe eine Reihe von Logos variabler Größe.

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

Dies funktioniert gut, bis die Fenstergröße verändert wird: Ich habe sie alle auf der gleichen Höhe von 50px mit einer Breite von auto eingestellt. Wenn das Fenster in der Größe geändert wird, fließen größere Logos außerhalb ihres Containers.

Ich möchte die Logos verkleinern, um ihre Behälterbreite zu passen. Ich habe versucht, dies mit max-width zu erreichen:

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

Dies funktioniert aber das Seitenverhältnis aufgrund der Höhe Eigenschaft verbleibenden 50px beeinträchtigt.

Irgendwelche Ideen?

Answer 1

Mit einer festen height und Variable width kann einer der folgenden passieren.

1. Die img wird gestreckt, um die variable Breite anzupassen und das Seitenverhältnis zu verzerren.
2. Die img wird abgeschnitten (overflow:hidden) durch die Eltern, aber das Seitenverhältnis bleibt intakt.

So können Sie die img reagieren auch. Aber dann wird es nicht die konstante Höhe haben, während das Seitenverhältnis intakt bleibt.

Answer 2

Ich denke, es ist unmöglich, seine Größe zu halten, wenn das Fenster zu klein ist und Sie die Größe des Bildes nicht ändern wollten. Warum nicht versuchen @media, die verschiedene CSS-Stile in verschiedenen Bedingungen bieten können.