Ankündigung

Einklappen
Keine Ankündigung bisher.

Fotos mit "einfachem" responsivem Design

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Fotos mit "einfachem" responsivem Design

    Hallo,

    zunächst:
    ch bin, was die Formatierung mit CSS anbelangt, ziemlicher Anfänger und möchte dennoch mit möglichst einfachem CSS ein Full-HD Foto, dass um die 1900 px (oder wenigstens 1600 px) breit ist, als Blickfang oben auf meine Webseite setzen, und zwar möglichst so, dass sich die relative Höhe des Fotos (die ich auf 330 px zurechtgeschnitten habe) auf verschiedenen Viewports nicht ändert, während die Breite verzerrungsfrei so verringert wird, das der horizontale Bildauschnitt kleiner wird und dabei die rechts gezeigten Bildinhalte zunehmend wegfallen, so, als schiebe man ein Blatt Papier von rechts nach links über das Foto. Ich habe das schon oft gesehen und diverse Tutorials durchforstet - ohne Erfolg.

    Ich fand nur das hier, aber das kann ja nicht klappen, weil das Foto eben doch in auch in der Höhe geändert wird und z.B. auf Full-HD-Monitoren viel zu hoch wird.

    IMG.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    }

    Ich möchte möglichst nur ein Foto vorhalten, dessen Dateigröße ich durch Komprimieren auf ca. 200 KB verringern möchte.
    Wenn aber nur andere Wege funktionieren,okay...

    Danke im Voraus,
    viele Grüße und einen guten Rutsch

    Bernhard
    Willkommen beim Gitarrenunterricht A. Hertel in Neuss mit preisgünstigen Angeboten für Erwachsene, Kinder und Jugendliche. <META NAME=

  • #2
    Hi!

    Das kannst du realisieren indem du das Bild als Hintergrund verwendest, zusammen mit background-size: fixed und background-position: center.

    Hier ein Beispiel

    Meinst du das so?

    Gruß Markus
    Zuletzt geändert von markus_sw; 31.12.2018, 13:53.
    Studio Westbaden

    Kommentar


    • #3
      Da der TO schreibt:
      während die Breiteverzerrungsfrei so verringert wird, das der horizontale Bildauschnitt kleiner wird und dabei die rechts gezeigten Bildinhalte zunehmend wegfallen, so, als schiebe man ein Blatt Papier von rechts nach links über das Foto.
      denke ich, dass man eher background-posiiton: left nehmen müsste.
      Edit: Ich wollte gerade ein Fiddle zum Test machen und habe bemerkt, dass das was Du, Bernhard, möchtest, das Standardverhalten ohne jedes CSS ist:
      http://jsfiddle.net/Sempervivum/kpnu09e4/3/
      Zuletzt geändert von Sempervivum; 01.01.2019, 10:57.

      Kommentar


      • #4
        Hallo,

        danke für Eure Antworten

        @sempervivum:

        ich fürchte, ich habe das was nicht verstanden. Auf Deiner Vorlage fand ich einen Eintrag bei HTML zu div id="container", aber im CSS-Teil nur eine dünne "1", aber keine nähere Beschreibung des Containers. Auf meiner Webseite habe ich im HTML-Bereich eingetragen

        <div id="container">

        <img src="bilder/egitarre.jpg" alt="Gitarrenunterricht" title="Gitarrenunterricht">
        </div>

        und keine Eintragung in der CSS zum div.

        Im Bilderordner befindet sich das skalierte Bild, aktuell 1600x330 px. Ich habe das im src-Bild-Tag ,
        mal ohne (wie bei Dir) und mal mit Größenangabe (width="1600" height="3330") ausprobiert. Das Ergebnisse im Browser sind gleich: das eingefügtes Foto, das zwar die 330px Höhe einhält,
        auch von rechts nach links zusammengeschoben wird - aber die Webseite bekommt unten einen horizontalen Scrollbalken.


        Bei meiner Überschriftzeile derselben Seite drüber, im HTML-Teil


        <div id="header_1">

        <h1>Gitarrenunterricht</h1>
        </div>
        --------------------------------------------------------------------------------

        In der CSS :

        #header_1
        {
        height:100px;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 20px;
        padding-top: 10px;
        box-sizing: border-box;
        background-color:#A3C7EE;
        }

        und das wird so zusammengeschoben, dass kein Scrollbalken eingesetzt wird.
        Klappt natürlich nicht bei einem Foto, das wird verzerrt.


        @markus_sw

        Wenn ich das richtig verstehe, legst Du das Bild vollständig in der CSS als background-image an. Hab's genauso versucht:

        HTML:

        <div class="image">

        </div>

        -------------------------------------------------------------------------------------------

        CSS:

        .image
        [
        background: url("kl_bilder/egitarre.jpg");
        min-height: 330px;
        background-size: fixed;
        background-position: center;
        }



        und da verschwindet das Bild vollständig..

        Keine Ahnung, was da lop ist.

        Veile Grüße
        Berrnhard
        #

        Kommentar


        • #5
          Soll das Bild auf deiner Startseite eingefügt werden? Dein Bild habe ich leider nicht gefunden: http://www.kuenstler-arbeitsforum.de...r/egitarre.jpg liefert Fehler 404 - Datei nicht gefunden. Wenn ich mein eigenes Bild mit den Entwicklerwerkzeugen einfüge, sieht es so aus wie auf dem Screenshot im Anhang. Scrollbalken werden ohnehin angelegt, weil die übrige Seite breiter ist.

          Kommentar


          • #6
            Hallo Sempervivum,


            danke für die Mühe, die Du Dir gemacht hast, vor allem das Einarbeiten Deines Fotos in den Quelltext vom Arbeitsforum.
            Sorry - Folgendes habe ich übersehen: es geht nicht um die Version des Arbeitsforums, die aktuell online ist.(wenigstens hatte ich schon den Footer rausgelassen, der ja zum Missverständnis geführt hat).

            Ich arbeite an einem kompletten Re-Design für das Arbeitsforum. Dazu existieren bereits Template-Baustellen, die ohne jedes Tabellen-Layout auskommen sollen (vgl. meine anderen Threads) - mit zwei separaten css für Layout und für die Schriften. Soll bald auch für andere Sites genutzt werden.

            Die oben erwähnten Infos sind aus css und htm des Haupt-Templates ausgekoppelt, das findest Du auf einer Site meiner Kollegin (dort, weil ich das gute Ranking des Arbeitsforums nicht gefährden möchte und den robot disallows auf die Schnelle nicht so recht traue):

            www.sensibel-heilen.de/templatetest.htm.

            Die Fotogröße wird in diesem Entwurf flexibel gehandhabt und behält die Seitenverhältnisse bei.
            Horizontale Scrollbalken entstehen erst bei einer Bildschirmwiedergabe kleiner als ca.760 px (Satzspiegel für Rahmen mit fester Breite).
            Darauf hatte ich die Tests des vorherigen Posts aufgesetzt. Die CSS sind separat.


            Viele Grüße
            Bernhard
            Zuletzt geändert von Bernhard; 02.01.2019, 15:59.

            Kommentar


            • #7
              Eigentlich finde ich dort den Status-quo, wo sich die Gitarre verkleinert, optimal, da wird nichts abgeschnitten. Aber wenn es dein Wunsch ist, dass die Größe konstant bleibt und rechts abgeschnitten wird, kannst Du das leicht durch overflow:hidden für den umgebenden Container erreichen, dann verschwinden die Scrollbars, siehe Anhang.

              Kommentar


              • #8
                Hi,
                ich zitiere mal aus dem Ausgangspost:
                Zitat von Bernhard Beitrag anzeigen
                möchte dennoch mit möglichst einfachem CSS [...] dass sich die relative Höhe des Fotos (die ich auf 330 px zurechtgeschnitten habe) auf verschiedenen Viewports nicht ändert, während die Breite verzerrungsfrei so verringert wird
                das dürfte nicht machbar sein.
                Du kannst einem <img> oder background-image 100% Breite zuweisen, aber beim <img> skaliert auch die Höhe und als background-image würde das Bild in der Höhe abgeschnitten.
                Als einzige Lösung für genau Dein Anliegen sehe nur, eine Grafik mit der gewünschen Höhe zu verwenden und diese als background-image mit 100% Breite einzubinden.

                Gruß
                Ingo
                Ingo Webdesign

                Kommentar


                • #9
                  Hallo,

                  danke erstmal. Ich bekomme irgendwie noch kein richtiges Gefühl für die Gesamtproportionen. Als Viewports zum Testen habe ich einen Full-HD-Monitor, einen 1280x1024, dann einen 1600x1200, ein Tablet und ein einfaches Galaxy. Gerade auf den "großformatigen" Monitoren kommt mir das Gitarren-Foto zu wuchtig rüber, aber das gilt ja auch für das gesamte Layout. Auf dem Galaxy-Format gefällt es mir am besten, da macht sich die relativ hohe Bildgröße wiederum positiv bemerkbar.
                  Ich werde das die nächsten Tage mal in verschiedenen Größen ausprobieren.

                  Danke und viele Grüße
                  Bernhard

                  Kommentar


                  • #10
                    Full-HD-Monitor, einen 1280x1024, dann einen 1600x1200, ein Tablet und ein einfaches Galaxy. Gerade auf den "großformatigen" Monitoren
                    Nicht jeder hat den Browser im Vollbildmodus, insofern ist es IMO nicht angebracht, die Größe des Monitors als Kriterium zu sehen.

                    kommt mir das Gitarren-Foto zu wuchtig rüber, aber das gilt ja auch für das gesamte Layout.
                    Wenn dir das Layout bzw. das Foto zu wuchtig oder groß vorkommt, könntest Du die Größe mit max-width nach oben begrenzen, entweder für die ganze Seite oder nur für das Gitarrenfoto.

                    Kommentar


                    • #11
                      Danke für die Tipps.
                      Wollte mich nur kurz melden, habe geschäftlich viel zu tun. Ich habe das mit dem overflow-hidden probiert, und grundsätzlich klappt das auch.Leider habe ich den Effekt von Anfang an falsch eingeschätzt. Die rechts gezeigten Bildinhalte werden wie geplant weggenommen und die fest vorgegebene Höhe bleibt, aber auf den wichtigen kleineren Viewports wie Smartphone und Tablet, denen ich auch wegen Deinem letzten Post Priorität geben kann, sind starre 330px (zu) viel. So finde ich tatsächlich die "Status-Quo-Version, wo sich der Inhalt verkleinert", auch passender. Ich musste das erstmal alles ausprobieren.

                      Viele Grüße Bernhard

                      Kommentar

                      Die neuesten Themen

                      Einklappen

                      Kostenlose Homepage bei Jimdo!

                      Einklappen

                      Jimdo

                      Die neuesten Beiträge

                      Einklappen

                      homepage-forum.de - Hilfe für Webmaster! Statistiken

                      Einklappen

                      Themen: 56.317   Beiträge: 427.806   Mitglieder: 27.630   Aktive Mitglieder: 64
                      Willkommen an unser neuestes Mitglied, TheP3aceguy.

                      Online-Benutzer

                      Einklappen

                      467 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 463.

                      Mit 1.625 Benutzern waren am 17.03.2018 um 19:52 die meisten Benutzer gleichzeitig online.

                      Lädt...
                      X