Responsive Bild Flex Lücke BUG?
bearbeitet von MrMurphy1Hallo
> 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.
Ich sehe zum Beispiel aus deinen sinnfreien Angaben eher das folgende HTML
~~~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
~~~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](http://boratb.bplaced.net/index015.html)
Gruss
MrMurphy