Bild mit Text responsive machen?
Ich programmiere einen Blog, in dem immer ein Bild links und rechts daran der dazu gehörige Text ist. Ich möchte, dass der Text, wenn der Bildschirm kleiner wird, nicht mehr neben, sondern unter dem Bild steht. Wie mache ich das am besten? Wer noch Details braucht, bitte fragen :)
3 Antworten
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
Wie mache ich das am besten?
So:
<!doctype html>
<title>responsive img</title>
<style>
figure > img,
figcaption {
display:inline-block;
vertical-align:top
}
</style>
<figure>
<img src="..." alt="Das Bild">
<figcaption>
Der Text zum Bild
</figcaption>
</figure>
Alex
Eine Variante wäre es, mit JS nach der Fensterbreite zu fragen. Falls diese kleiner als Xpx ist, packst du den Text halt unten hin.
Das Ganze in ein Event (on window size changed) zu packen, wäre sinnvoll.
Flexbox wäre eine Lösung:
https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/#chapter10