Bild will nicht im div bleiben

Diskutiere Bild will nicht im div bleiben im CSS Forum im Bereich Programmierung; HTMl: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Aktienrechner</title> <link rel="stylesheet" href="style.css"> </head> <body>...
Neues Thema erstellen Antworten
Diskutiere Bild will nicht im div bleiben im CSS Forum im Bereich Programmierung; HTMl: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Aktienrechner</title> <link rel="stylesheet" href="style.css"> </head> <body>...
Neues Thema erstellen Antworten
S

SevenMystic

New member
Beiträge
3
Punkte Reaktionen
0
HTMl:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aktienrechner</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Aktienrechner</h1>
<div class="Aktiengruppe">
<div class="flex-item Aktie-01">
<div class="AlleBilder" id="Bild01">
<img src="https://aktienfinder.net/assets/d1ec2276308ea54c5f26dcb5f675947b.webp">

</div>
<div id="Quelle-BP">
<a href="https://aktienfinder.net/dividenden-profil/BP-Dividende">
BP-aktienfinder</a>
</div>
</div>
<div class="flex-item Aktie-02">
<div class="AlleBilder" id="Bild02">
<img src="https://aktienfinder.net/assets/01df3952eb4e3147b067dc3577f6a5a8.webp">
</div>
<div id="Quelle-Admiral">
<a href="https://aktienfinder.net/dividenden-profil/Admiral Group-Dividende">
Admiral Group-aktienfinder</a>
</div>
</div>

<div class="flex-item Aktie-03">
<div class="AlleBilder" id="Bild03">
<img src="https://aktienfinder.net/assets/5a74bfe0eb6030d83bc46140bc8d7a6e.webp">
</div>
<div id="Quelle-Rubis">
<a href="https://aktienfinder.net/dividenden-profil/Rubis-Dividende">
Rubis-aktienfinder</a>
</div>
</div>
<div class="flex-item Aktie-04">
<div class="AlleBilder" id="Bild04">
<img src="https://aktienfinder.net/assets/fb44e7ac1e127ff0571d1e891960a336.webp">
</div>
<div id="Quelle-NormaGroup">
<a href="https://aktienfinder.net/dividenden-profil/Norma Group-Dividende">
Norma Group-aktienfinder</a>
</div>
</div>
</div>
<script type="text/javascript" src="name.js"></script>
</body>

</html>

CSS:
.Aktiengruppe {
display: flex;
}
.AlleBilder {
height: 300px;

}
Problem:
Hallo ich bin neu, und hab eine Frage zwecks Bild Admiral dies ist größer als das div welches ich ihm zugeordnet habe.
Hat jemand einen Tipp für mich was ich Falsch mache?
 
S

scatello

Well-known member
Beiträge
390
Punkte Reaktionen
31
Das Bild ist größer als alle anderen Bilder und weder Höhe noch Breite ist für dieses Bild angegeben. Entweder die Bildgröße anpassen oder per CSS die Größe reduzieren.
 
S

Sempervivum

Well-known member
Beiträge
412
Punkte Reaktionen
66
Versuche, nicht nur dem div eine Höhe zu geben sondern zusätzlich dem img eine Höhe von 100%.

BTW:
  • Es muss nicht um jedes Element ein div herum sein, d. h. auf das div.AlleBilder kannst Du u. U. verzichten, das hat den Vorteil, dass es kein Rätselraten gibt: "Was muss ich jetzt wie stylen, das div oder das img?".
  • Dies ist ein klassischer Anwendungsfall für das figure-Tag:
Code: 
<figure class="flex-item Aktie-04">
    <img  class="AlleBilder" id="Bild04" src="https://aktienfinder.net/assets/fb44e7ac1e127ff0571d1e891960a336.webp">
    <figcaption id="Quelle-NormaGroup">
        <a href="https://aktienfinder.net/dividenden-profil/Norma Group-Dividende">
            Norma Group-aktienfinder
        </a>
    </figcaption>
</figure>
  • Code besser in Codetags posten, das Menü rechts von dem Landschaftssymbol und dann </>.
 
S

SevenMystic

New member
Beiträge
3
Punkte Reaktionen
0
Ja soweit hab ich das auch verstanden.
Also Code technisch nix falsch gemacht?

Ich wollte die Breite und Höhe ja nicht angeben, sondern ich dache das Bild pass sich dem div an, das Bild ragt ja drüber und das verstehe ich nicht.

Ich wollte damit alle Bilder ansprechen, damit ich nicht für jedes einzelne herum experimentieren muss.

Wie könnte ich per CSS die Größe reduzieren?
 
S

Sempervivum

Well-known member
Beiträge
412
Punkte Reaktionen
66
ich dache das Bild pass sich dem div an, das Bild ragt ja drüber und das verstehe ich nicht.
Zum Vergrößern anklicken....
Das tut es leider nicht von allein, sondern durch eine Höhe von 100% musst Du es dazu zwingen.
Wie könnte ich per CSS die Größe reduzieren?
Zum Vergrößern anklicken....
Das ist einfach:
Code: 
        .AlleBilder img {
            height: 100%;
        }
 
S

SevenMystic

New member
Beiträge
3
Punkte Reaktionen
0
Ja geil hab ich gerade auch ausgetestet:

img {
wight: 100%;
height: 100%;
}

Vielen Leiben Dank Leute :love:
 
S

Sempervivum

Well-known member
Beiträge
412
Punkte Reaktionen
66
Freut mich, dass es funktioniert.
Ich hoffe, diesen Schreibfehler hast Du in deinem originalen CSS nicht drin: wight: 100%;
 
Thema:

Bild will nicht im div bleiben

Thema:

Bild will nicht im div bleiben

Oben Unten