Verschiedene Bildgrößen in einem Block.

[scherenschlag]

https://www.tsad17.de/BSV2022/

Moin.
Mal abgesehen davon, dass mir die drei Vereinslogos in der Mitte der Seite ohnehin zu groß sind,
hätte ich gerne dass das linke und das rechte kleiner ist als das in der Mitte.
Erstmal egal welche Größe.
Ich habe mal versucht im HTML den img Tags 1,2,3 anzufügen (img1, img2, img3)
um Sie dann im CSS mit verschiedenen Größen auszustatten. Funzt nicht. HTML meckert.
Wie geht es denn, wenn es überhaupt geht, richtig?

[Tommy Herrmann]

Moin,

meinst Du jetzt diese 3 Bilder?

Die werden ja gerade mit diesen <div> als Hintergrundbilder dargestellt:

Code: Alles auswählen

<div class="image-wrap">
    <div class="image image-left"></div>
    <div class="image image-middle"></div>
    <div class="image image-right"></div>
</div>

... und so einer CSS, z.B. für das linke Bild:

Code: Alles auswählen

.image-left {
  width: 600px;
  border-radius: 15px;
  top: 0;
  left: 0;
  z-index: 2;
  background-image: url("../../../assets/images/patenschaft-2000x1331.jpg");
}

Mit <img1>, <img2> geht das natürlich nicht. <img> ist ein HTML-Tag (Selektor) - ein fester HTML Bestandteil um ein Bild anzuzeigen.

https://www.w3schools.com/tags/tag_img.asp

Wolltest Du einem bestimmten Bild eine bestimmte CSS geben, dann eben wieder über ein Class, die mit einem .Punkt beginnt und dann einen Namen Deiner Wahl bekommen kann.

Beispiel Bildbreite ("width" = Breite)

Code: Alles auswählen

.meinBild1 {
   width: 20%;
}

.meinBild2 {
   width: 50%;
}

/* oder auch */

.meinBild3 {
   width: 200px;
}

Die entsprechende Class (CSS-Klasse) fügt man dann an das dazugehörige Bild:

Code: Alles auswählen

<img class="meinBild1" src="bild.jpg" alt="Hund-Katze-Maus">

Denke aber bei der Größenangabe, insbesondere der Breite, immer daran, dass das auch am Handy passen muss - also "responsive" sein muss. Entweder mit Prozentangaben oder mit einer zusätzlichen @media Anweisung in der CSS.

[scherenschlag]

Ich meinte die drei Vereinslogos etwas weiter unten. BSV 58, FCF, BSV Fortuna

[Tommy Herrmann]

Sorry - hatte nicht ganz richtig gelesen - Du sprichst von den runden Logos ...

Code: Alles auswählen

<img src="assets/images/bsv58downloads-1-816x816.png" alt="">

Du kannst das also auch mit einer CSS-Class machen, aber ebensogut eine direkte Style-Anweisung dran schreiben, wie z.B.:

style="width: 120px; max-width: 100%;"

Code: Alles auswählen

<img style="width: 120px; max-width: 100%;" src="assets/images/bsv58downloads-1-816x816.png" alt="">

Als CSS-Class würde das z.B. so aussehen und exakt das gleiche machen. Die Class wird dann im Block in den "CSS Editor" geschrieben:

Code: Alles auswählen

.meinLogo1 {
   width: 120px;
   max-width: 100%;
}

Code: Alles auswählen

<img class="meinLogo1" src="assets/images/bsv58downloads-1-816x816.png" alt="">

Eine direkte Style-Anweisung ("Inline-Style") verwendet man bei einzelnen Style-Änderungen. Würde man diese Änderung mehrmals oder häufig verwenden, sollte man eine CSS-Class erstellen.

[scherenschlag]

Werde ich dann mal probieren......