Objekte sollen die Div-Box nicht verlassen. (CSS)
Hallo!
Wie schaffe ich es, das es Objekte (Text, Bilder, etc...) nicht ihre Div-Box verlassen (also formatiert bzw. kleiner werden, wenn ich zum Beispiel das Fenster verkleiner, oder die Webseite auf dem Handy öffne.
Schonmal vielen Dank im Vorrau :)
Lg mono
4 Antworten
Fuer Bilder:
img {
max-width: 100%;
height: auto;
}
Fuer Container (in dem sich der Text fliesst), Beispiel fuer einen Container der mowglichst 800px breit sein sollte, aber 80% nicht uebersteigen sollte:
.container {
width: 800px;
max-width: 90%;
}
Um die Textgroesse anzupassen, brauchst du media queries, aber oft ist das gar nicht noetig.
Gib doch auch ein min-width für den container an, so verhinderst du den Effekt, dass da Bild aus der Box fliesst.
Overflow: hidden; wäre auch noch ne alternative oder mit Scrollbalken, overflow: scroll; (oder auto)
LG
das Fenster verkleiner, oder die Webseite auf dem Handy öffne.
Stichwort wäre »Responsive Webdesign« und das Arbeiten mit Media-Queries.
Die Größe der Elemente nicht in % sondern in px angeben.