Wie man Inline-Bilder dimensioniert Screenshots in Produktbeschreibung

Question

Ich entwerfe eine Website, die Apps verkauft. Jede Produktseite enthält Text mit Screenshots. Ich habe Probleme, die Größe und das Verhalten der Bilder zu kontrollieren. Jeder Screenshot hat eine andere Größe und Form - einige sind groß und schmal, während andere kurz und breit sind.

Meine Frage:
Wie ich die Größe dieser Bilder steuern bin soll? Einige sind zu 100% perfekt, andere wiederum wären zu 100% zu groß. Also, wenn ich einen Wert in der CSS setzen, wird es für Bild 1,3,6,9 ok sein, aber nicht für Bilder 2,4,6,8 (und natürlich gibt es mehr als 2 Arten von Größen ...). Ich habe versucht, max-Breite, aber das ist offensichtlich fehlgeschlagen, weil wenn ein Bild die maximale Breite überschreitet, wird es verkleinert werden, während eine andere wird nicht - das ergibt eine lustig aussehende Seite!
Soll ich in einem solchen Fall ein lokales Styling für jedes Bild erstellen?
Und wenn die Antwort ist, dass hier lokales Styling erforderlich ist, bedeutet das, dass jede Seite eigene Medienabfragen benötigt, um auch die Größe anzupassen?

Danke.

Answer 1

Sie können eine 5 css-Klasse namens .width1 bis .width5 mit einem Breitenwert von 20% bis 100% erstellen.

Wenn Sie ein neues Bild hinzufügen, wählen Sie eine Klasse, die Ihren Anforderungen entspricht.

Wenn Sie mehr Präzision benötigen, erstellen Sie einen Satz von 10 Klassen statt 5! Edit: wie versprochen, der Code:

.size1{width:10%;} 
.size2{width:20%;} 
.size3{width:30%;} 
.size4{width:40%;} 
.size5{width:50%;} 
.size6{width:60%;} 
.size7{width:70%;} 
.size8{width:80%;} 
.size9{width:90%;} 
.size10{width:100%;} 

So ist das Bild:

<img class="size2" src="..." /> 

werden 20% breit sein.