Responsive Bild Flex Lücke BUG?

[MrMurphy1]

Hallo

Aber muss doch gehen.

Klar. Mit korrektem, aktuellem HTML und CSS.

Wobei du langsam mal erkennen solltest das deine Testseiten dich nicht weiterbringen. Zudem willst du per CSS noch zu viel bestimmen und bastelst dir dadurch Stolperfallen über die dann dann selbst fällst.

Einige CSS-Angaben erscheinen zudem sinnfrei. Zum Beispiel die Bildbreite auf 50 % minimieren. Mit der Praxis hat das nix zu tun.

Das Problem hat Matthias Apsel bereits vollkommen richtig beschrieben. Vielleicht hilft dir ja ein praktisches Beispiel.

Ich sehe zum Beispiel aus deinen sinnfreien Angaben eher das folgende HTML

<h2>Ohne Link</h2>
<div class="flexy2">
   <p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/DE-Wikipedia-2-Millionen-Artikel.svg/209px-DE-Wikipedia-2-Millionen-Artikel.svg.png" alt="Beispielbild">
   <p>Ich werde das Kämpfen nicht vermissen, das Kämpfen wird mich vermissen.</p>
</div>
<h2>Mit Link</h2>
<div class="flexy3">
   <p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
   <a href="">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/DE-Wikipedia-2-Millionen-Artikel.svg/209px-DE-Wikipedia-2-Millionen-Artikel.svg.png" alt="Beispielbild">
   </a>
   <p>Ich werde das Kämpfen nicht vermissen, das Kämpfen wird mich vermissen.</p>
</div>

mit diesem CSS

img {
   display: block;
   max-width: 100%;
   border: 0;
}
.flexy2,
.flexy3 {
   border: 3px solid blue;
   width: 80%;
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: center;
}

Beispiel zum Testen:

Beispielseite

Gruss

MrMurphy