Verschiedene Bildgrößen in einem Block.

Allgemeine Fragen
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Verschiedene Bildgrößen in einem Block.

Ungelesener Beitrag von 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? :confused:
scherenschlag
MBR 5.9.17
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Verschiedene Bildgrößen in einem Block.

Ungelesener Beitrag von Tommy Herrmann »

Moin,

meinst Du jetzt diese 3 Bilder?


Bilder.JPG


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
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Re: Verschiedene Bildgrößen in einem Block.

Ungelesener Beitrag von scherenschlag »

Ich meinte die drei Vereinslogos etwas weiter unten. BSV 58, FCF, BSV Fortuna
scherenschlag
MBR 5.9.17
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Verschiedene Bildgrößen in einem Block.

Ungelesener Beitrag von 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
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Re: Verschiedene Bildgrößen in einem Block.

Ungelesener Beitrag von scherenschlag »

:tu:
Werde ich dann mal probieren......
scherenschlag
MBR 5.9.17
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot] und 23 Gäste