Verschiedene Bildgrößen in einem Block.
-
- Mitglied (Level 10)
- Beiträge: 257
- Registriert: Di 15. Dez 2020, 11:46
- Wohnort: Dortmund
Verschiedene Bildgrößen in einem Block.
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?
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?
scherenschlag
MBR 5.9.17
MBR 5.9.17
- Tommy Herrmann
- Site Admin
- Beiträge: 5836
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Verschiedene Bildgrößen in einem Block.
Moin,
meinst Du jetzt diese 3 Bilder?
Die werden ja gerade mit diesen <div> als Hintergrundbilder dargestellt:
... und so einer CSS, z.B. für das linke Bild:
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)
Die entsprechende Class (CSS-Klasse) fügt man dann an das dazugehörige Bild:
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.
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>
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");
}
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;
}
Code: Alles auswählen
<img class="meinBild1" src="bild.jpg" alt="Hund-Katze-Maus">
-
- Mitglied (Level 10)
- Beiträge: 257
- Registriert: Di 15. Dez 2020, 11:46
- Wohnort: Dortmund
Re: Verschiedene Bildgrößen in einem Block.
Ich meinte die drei Vereinslogos etwas weiter unten. BSV 58, FCF, BSV Fortuna
scherenschlag
MBR 5.9.17
MBR 5.9.17
- Tommy Herrmann
- Site Admin
- Beiträge: 5836
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Verschiedene Bildgrößen in einem Block.
Sorry - hatte nicht ganz richtig gelesen - Du sprichst von den runden Logos ...
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%;"
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:
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.
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="">
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.
-
- Mitglied (Level 10)
- Beiträge: 257
- Registriert: Di 15. Dez 2020, 11:46
- Wohnort: Dortmund
Re: Verschiedene Bildgrößen in einem Block.
Werde ich dann mal probieren......
scherenschlag
MBR 5.9.17
MBR 5.9.17
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 14 Gäste