Frage von CleYT, 30

Wie krieg ich das Bild responsiv?

Heyy! Bitte helft mir! :D Ich kriege das Banner auf der Webseite (http://www.piratenschnack.com/) wo Piratenschnack groß drauf steht einfach nicht responsiv, links behält es den Abstand brav aber nicht rechts, wenn ich margin-left nutze dann wird das margin-right ignoriert und wie ich es centere weis ich nicht, Vorschläge? Bitte danke, mit dem weißen Hintergrund hats ja schließlich auch irgendwie funktioniert...

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von surbahar53, 15

Du musst in <img src= ... > den Parameter z.B. width="20%" einbauen. Die Angabe width bezieht sich auf die Breite des Parent-Container, in diesem Fall wohl "body". Es wäre besser, das Bild in einen Container zu legen

<div class="container_image" >

<img ... >

</div>

Im Css (nur Beispiel)

.container_image

{

margin: 0px auto;

width: 30%;

}


Antwort
von medmonk, 11

Normalerweise reicht es aus, wenn du dem Bild ein Breite von 100% zuweist und die Höhe auf auto festlegst. Da du jedoch mit absoluter Positionierung und einem z-index gearbeitet hast, so erst einmal knicken kannst. 

img {
 width: 100%;
 height: auto;
}

Allgemein ist das Markup der Seite grauenhaft. Dabei ist es nichts extravagantes und mit wenigen Zeilen Code schnell gestrickt. Wenn ihr auch selber einen Gefallen tun wollt, setzt ihr euch nochmal hin und fangt von vorne an. Arbeitet nicht mit absoluten Positionierungen bzw. nur dann wenn es nicht anders geht. 

Notfalls habe ich später etwas zeit und könnte euch nen gescheites Grundgerüst zukommen lassen. Es aber erst einmal bei dem belasse. Ist ja schließlich euer Projekt, an dem ihr nach und nach etwas dazulernen könnt und sollt. Daher viel Erfolg und bei weiteren Fragen einfach fragen. 

LG medmonk 

Antwort
von VeryBestAnswers, 4

Was hast du denn da für eine Website verbrochen? Das hat überhaupt keine Struktur. Kein Wunder, dass es da schwierig ist, die Größe von Elementen anzupassen.

Erster Schritt: bring die Elemente in die richtige Reihenfolge. Außerdem muss der footer im <body> sein!

Zweiter Schritt: Schachtel die Elemente richtig ineinander: Mach z.B. einen großen, weißen <div> Container, in den du alles andere reintust.

Dritter Schritt: Schau, wo du absolute, und wo du relative Größen brauchst! Wenn du etwas in einen anderen Block tust, verwende eine relative Position, aber z.B. beim Hintergrundbild muss die Position absolut sein (position: absolute).

Vierter Schritt: Stelle Höhe und Breite von den Elementen ein. Ziel ist es, dass die Website auch in verschiedenen Bildschirmgrößen gut ausieht! Du kannst, um das zu testen, die Fenstergröße ändern, oder mit Strg+ / Strg- zoomen. Wenn ein Element ??? Pixel breit und zentriert sein soll, brauchst du:

width: ???px;
margin: 0 auto;

Bei dem Banner musst du die Breite setzen, damit es funktioniert. Wenn du als linken/rechten Abstand 27% hast, kannst du stattdessen verwenden:

margin-left: 27%;
width: 46%; /* 100 - 27 - 27 = 46 */

Und verwende das <video> Element nicht, wenn du es nicht unbedingt benötigst! Für Bilder gibt es das <img> Element und die CSS-Eigenschaft "background-image: url(???.png)".

Wenn du auf Probleme stößt, kannst du mich in den Kommentaren fragen.

Viel Erfolg beim Programmieren ;)

Antwort
von surbahar53, 6

Deine neue Lösung ist nicht optimal, weil die Breite nun für alle "img" Typen gilt.

Antwort
von CleYT, 12
HAT SICH GEKLÄRT!
Antwort
von CleYT, 1

DANKE HABE bereits eine Lösung gefunden!

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten