Bilder auf 50% der Bildschirmbreite setzen - "responsive design"

  • Gibt es HTML Code mit dem man Bilder auf 50% der Webseite anzeigen lassen kann, wenn man die Auflösung des die Webseite besuchenden Browsers nicht kennt?



    xxxxx-com ist nur ein Platzhalter.


    So habe ich das aktuell. Wenn ich mal davon ausgehe, dass jeder wohl 1600 Pixel Auflösung in der Breite hat. Wenn ich das Fenster kleiner mache, habe ich da aber bei 2 Bildern dann so einen Zeilenumbrauch drin, den ich nicht haben möchte.


    Danke für Hilfe

  • Gibt es HTML Code mit dem man Bilder auf 50% der Webseite anzeigen lassen kann, wenn man die Auflösung des die Webseite besuchenden Browsers nicht kennt?

    Nein. Für die Darstellung ist CSS zuständig und 50% der Breite des Elternelements bekommen Bilder mit »img {width:50%;}«. Aber was interessiert dich die Auflösung des Monitors auf dem Der Browser läuft? Die hat absolut nichts mit der Größe des Browserfensters zu tun und ist für dein Problem ohnehin irrelevant.

    xxxxx-com ist nur ein Platzhalter.

    aber ein ziemlich schlechter (gut noch besser also mit zwei x weniger …). Verwende für Beispiele immer reservierte Domains wie example.com und keine existierenden.

    So habe ich das aktuell. Wenn ich mal davon ausgehe, dass jeder wohl 1600 Pixel Auflösung in der Breite hat. […]

    Deine Annahme ist falsch. Das Gerät das deine Seite anzeigt kann eine beliebige Breite von irgendwas zwischen 320 bis 4000 Pixeln haben (auch mehr oder weniger ist nicht ausgeschlossen). Längst nicht jede Seite wird auf einem Desktoprechner mit großem Monitor betrachtet, oft werden Mobile Geräte (Notebook, Tablet und Smartphone) benutzt. Wenn die Bild erkennbar sein sollen musst du bei geringeren Displaygrößen die Bildbreite von 50% auf 100% setzen, media-Querys helfen dabei (aber keine Pixel als Einhalt für den Break-Point sondern em o.ä.!).

  • ohje... CSS scheint mir als HTML Amateur irgendwie viel zu kompliziert um da auch nur mal eben diese eine Sache hinzukriegen und auch die WYSIWYG Editoren funktionieren da nicht so wie ich erwartet hätte.


    Das mit den 50% hast du natürlich korrekter beschrieben, als ich es gemacht habe. Und auch die Gründe, warum ich das will stehen da präziser. Eben genau weil ein Nutzer eine andere Breite haben könnte, durch Auflösung oder kleineres Display einfach.


    Wie kriegt man CSS denn in eine HTML Datei überhaupt rein? Mit einem Editor einfach unten anhängen hat schon mal nicht geklappt.

    Und kann jemand mir ein einfaches Beispiel zeigen, wie so etwas mit 2 Bildern und jedes Bild 50% aussieht? Ich habe mal im Internet nach Beispielen gesucht, die haben aber nicht richtig funktioniert dann. Z.B. hier habe ich den Code nicht mal richtig in eine Datei zusammenbauen können: https://stackoverrun.com/de/q/11653529 - der HTML Code wurde dann als Text über den Bildern angezeigt?

  • Zitat

    Wie kriegt man CSS denn in eine HTML Datei überhaupt rein?

    Das kannst Du hier nachlesen:

    https://wiki.selfhtml.org/wiki…ieg/Stylesheets_einbinden


    Die Bilder so einrichten, dass sie nebeneinander stehen und das Browserfenster ausfüllen kannst Du leicht mit diesem CSS:

  • Ok. Danke für den Hinweis, habe ich im Head eingebunden und sieht mit dem Bild schon ganz ok aus.

    2 Kleine Dinge noch:


    Das eine Bild hat ein paar mehr Pixel in der Höhe. Kann ich da irgendwie was machen, damit die beiden Bilder immer gleich groß nebeneinander sind, egal welche Auflösung?

    Und wie kriege ich da jetzt mittig unter jedes Bild noch einen Text mit Hyperlink?

  • Hat leider nicht funktioniert.

    Die Bilder sind dann beide viel kleiner.

    Den Teil mit Wrapper habe ich in den Teil Header bei style gepackt, unten den Verweis auf die beiden Bilder und nur den src Teil angepasst.


  • Das liegt daran, dass Du jetzt eine zusätzliche Stufe mit den Divs hast. Was die Divs bei Stackoverflow sind, sind die a-Tags bei dir. So funktioniert es wieder:

  • Für die andere Frage habe ich leider keine vollautomatische Lösung nur mit CSS gefunden, jedoch dieses:

    https://stackoverflow.com/ques…qual-heights-with-flexbox

    Das erfordert, dass Du die Seitenverhältnisse selber berechnest, was akzeptabel wäre, wenn sich die Bilder nur selten ändern. Ändern sie sich häufiger, könnte man die Werte mit Javascript berechnen.

    Würde dann so aussehen:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!