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, 12: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, 09: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, 14: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


                      • #12
                        Hallo,

                        ich habe Eure Tipps anstelle des Arbeitsforums auf eine neue Seite angewendet, mit der ich zufrieden bin. Sie ist seit drei Tagen online, und ich bin eigentlich stolz darauf. Es sollte schon halbwegs responsive werden (vgl. Titel).

                        (B.t.W.: die Arbeiten am Arbeitsforum laufen im Hintergrund weiter, ich habe mit einem 1:1-Redesign der alten Seiten begonnen.)

                        Jetzt kommt das Aber:

                        Wenn ich diese neue Site www.gitarrenunterricht-neuss.de von Google auf Smartphone-Tauglichkeit prüfen lasse, erhalte ich:

                        - Darstellungsbereich nicht definiert
                        - Schriften zu klein

                        Habe eigentlich für meine Verhältnisse einiges getan, um die Darstellung auf dem Smartphone zu verbessern.
                        Gebe ich ein:

                        <meta name="viewport" content="width=device-width, initial-scale=1.0">

                        endet das in einem Darstellungschaos.
                        Gerade die hier angesprochenen responsiven Elemente werden beim Smartphone auf die Hälfte ihrer Größe zusammengeschoben (!) Da kann man glatt...

                        Was kann ich tun ? Erstmal habe ich den Meta natürlich wieder rausgenommen.

                        Bin für jeden Tipp dankbar,

                        viele Grüße Bernhard

                        Kommentar


                        • #13
                          Gerade die hier angesprochenen responsiven Elemente
                          Welche meinst Du denn damit? Bei der Diskussion oben ging es doch vor allem um das Gitarrenbild?

                          Gebe ich ein:

                          <meta name="viewport" content="width=device-width, initial-scale=1.0">

                          endet das in einem Darstellungschaos.
                          Stell das mit diesem Meta doch Mal online, damit man es sich ansehen kann. Du kannst ja eine Kopie der Seite anlegen, damit das Chaos nicht öffentlich wird.

                          Vermutlich werden auch die Menüs ein Problem sein: Für das linke wird der Platz fehlen und das obere wird umgebrochen. Gängige Praxis ist hier, das Menü als Hamburger-Menü anzulegen, so dass es zunächst verborgen ist und nur bei Berührung aufklappt.

                          Kommentar


                          • #14
                            Hallo, danke für die Antwort.

                            Ich mach das mal wie letztes Mal und packe die Seite in eine andere ein:

                            www.sensibel-heilen.de/test.htm - habe das gerade überprüft, nicht anklicken, das Programm macht "Templatetest" draus > 404 > bitte zu Fuß eingeben...

                            Darstellung auf`m Galaxy geht so natürlich gar nicht. .

                            Hamburger Menü &Co.:

                            ich weiß auch, wie ein echtes responsives Design aussieht. Und ich habe seit September letzten Jahres mit HTML 5 angefangen, vorher konnte ich nur Tabelle
                            Ich habe darauf geachtet, dass man alles auch auf einem Galaxy lesen kann. Ist klein, okay, habe daher die Schriften auf den ersten beiden Seiten gestern vergrößert. Meine Kunden sind in der Lage, das Handy zu drehen, was auch beim Eintippen der Suchbegriffe bequemer ist. Die haben das hinbekommen ! Und ich finde, da kann man alles prima lesen. Aber Google meckert....wenigstens nur 2x.
                            Fernziel ist sowas wie www.solingen.de, da gibts auch schonmal einen Text neben einem Bild, aber oben rechts auch das Hamburger Menü, ich weiß...

                            Gibts noch eine andere Möglichkeit, das Google-Meckern vieleicht mit anderen Parameten in dem Meta abzustellen ?
                            Oder ganz was anders, damit Google zufrieden ist ? Da gibts ja nur schwarz und weiß, gut und schlecht...und Anleitungen zum Abstellen, für die ich ein Jahr ansetze.

                            Schriften und Links kriege ich notfalls noch größer...aber
                            Ich kann leider nur einen Schritt nach dem anderen und möchte nicht mein gerade fertig gestelltes Design in den See werfen. Es gibt ja trotz "mobile First" und "gut oder schlecht" auch noch andere Formate. Gerade meine Full-HD-Gitarre hat es IMO verdient.


                            Danke im Voraus,
                            viele Grüße

                            Bernhard
                            Zuletzt geändert von Bernhard; 23.02.2019, 10:31.

                            Kommentar


                            • #15
                              So erkennt man gut, wo die Probleme liegen Ja, da kannst Du Schritt für Schritt vorgehen:

                              Das Menü oben passt sich an die Fensterbreite an, aber dann passt die Schrift nicht mehr in die Felder. Lösung indem Du auf ein Hamburger-Menü umstellst.

                              Die Gitarre ist IMO in Ordnung.

                              Bei der großen Überschrift über der Gitarre ist das Problem, dass Du dem Container #title_header eine feste Höhe gegeben hast. Lösung sehr einfach, indem Du diese weg lässt.

                              Der große Hauptinhalt darunter ist nicht responsiv und wird eigentlich gut dargestellt, nur dass man horizontal scrollen muss. Lösung indem Du das Menü links in ein Hamburger-Menü überführst und den Container rechts responsiv machst.

                              Kommentar

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

                              Einklappen

                              Themen: 56.372   Beiträge: 428.019   Mitglieder: 27.710   Aktive Mitglieder: 76
                              Willkommen an unser neuestes Mitglied, Hamburgerjung.

                              Online-Benutzer

                              Einklappen

                              711 Benutzer sind jetzt online. Registrierte Benutzer: 0, Gäste: 711.

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

                              Die neuesten Themen

                              Einklappen

                              • Hamburgerjung
                                Mein Reise- und Foto-Blog über die Hansestadt Hamburg
                                Moin, moin liebe Community von homepage-forum.de,




                                ich bin über diesen Thread gestolpert und wollte die Gelegenheit nutzen, um hier einmal meinen neuen Reise- und Foto-Blog über Hamburg vorzustellen. Besucher finden hier unzählige Fotos und (einzigartige) Reiseberichte...
                                Heute, 10:31
                              • Andre1
                                neuer HP 24Zoll Monitor
                                Hallo,

                                vor einigen Wochen ist mein Hund auf den Schreibtisch gesprungen, weil wir den alleine lassen mussten und er das nicht kann, der hat es nicht gelernt. Dabei hat er meinen Monitor 21 Zoll, runter geschmissen und der war zwar noch funktionsfähig, aber doch kaputt. Deswegen habe ich...
                                Gestern, 22:49
                              • ST747
                                Brexitus
                                hi, das chaos wegen dem brexit ist ggf. doch nicht so ein chaos,

                                es könnte auch gut durchdacht sein.

                                die mehrheit der briten lehnt ja den eu-vertrag ab.

                                aber bei der abstimmung für einen ungeordneten brexit war

                                dann die abstimmung hauchdünn, nur...
                                Gestern, 20:34
                              • arnego2
                                Antwort auf Arbeit Schweißer
                                Ja bei https://machdudas.de allerdings einfach ist es nicht das Profil aufzubauen....
                                Gestern, 17:47
                              • acrimo
                                Antwort auf Hängesessel oder Hängematte?
                                Ich würde auch gerne einen Hängesessel kaufen....
                                19.03.2019, 23:11

                              Kostenlose Homepage bei Jimdo!

                              Einklappen

                              Jimdo

                              Die neuesten Beiträge

                              Einklappen

                              • Hamburgerjung
                                Mein Reise- und Foto-Blog über die Hansestadt Hamburg
                                Moin, moin liebe Community von homepage-forum.de,




                                ich bin über diesen Thread gestolpert und wollte die Gelegenheit nutzen, um hier einmal meinen neuen Reise- und Foto-Blog über Hamburg vorzustellen. Besucher finden hier unzählige Fotos und (einzigartige) Reiseberichte...
                                Heute, 10:31
                              • Andre1
                                neuer HP 24Zoll Monitor
                                Hallo,

                                vor einigen Wochen ist mein Hund auf den Schreibtisch gesprungen, weil wir den alleine lassen mussten und er das nicht kann, der hat es nicht gelernt. Dabei hat er meinen Monitor 21 Zoll, runter geschmissen und der war zwar noch funktionsfähig, aber doch kaputt. Deswegen habe ich...
                                Gestern, 22:49
                              • ST747
                                Brexitus
                                hi, das chaos wegen dem brexit ist ggf. doch nicht so ein chaos,

                                es könnte auch gut durchdacht sein.

                                die mehrheit der briten lehnt ja den eu-vertrag ab.

                                aber bei der abstimmung für einen ungeordneten brexit war

                                dann die abstimmung hauchdünn, nur...
                                Gestern, 20:34
                              • fragola
                                Arbeit Schweißer
                                Hallo,
                                mein Bruder ist Schweißer und möchte Arbeit in Berlin finden. Wie kann er das am schnellsten machen? Kennt ihr vertrauenswürdige Jobportale?
                                19.03.2019, 22:58
                              • arnego2
                                Antwort auf Arbeit Schweißer
                                Ja bei https://machdudas.de allerdings einfach ist es nicht das Profil aufzubauen....
                                Gestern, 17:47
                              • acrimo
                                Antwort auf Hängesessel oder Hängematte?
                                Ich würde auch gerne einen Hängesessel kaufen....
                                19.03.2019, 23:11
                              • acrimo
                                Antwort auf Nutzt Ihr Online Konverter?
                                Manchmal nutze ich einen Konverter. Das ist sehr praktisch....
                                19.03.2019, 23:09
                              • Ctrl-C
                                Impressum bei HTTP 301?
                                Ich bin ein Komponist und biete diverse Kinderstücke zum Download kostenlos an (PDF und MP3-Demos). Diese Werke gebe ich grundsätzlich sowohl für kommerzielle als auch für nicht-kommerzielle Nutzung bzw. Verwertung frei. Meine Homepage besteht aus einer 1 KB großen statischen index.html Datei,...
                                18.03.2019, 20:16
                              • Localfu
                                Antwort auf Impressum bei HTTP 301?
                                (Keine Rechtsberatung)
                                Also, alleine schon die Nutzung einer .DE-Domain mit Weiterleitung auf einen Webserver im Ausland ändert nichts daran, dass du ein Impressum benötigst. Zudem zum Webhoster - DE-Doamins werden ausschließlch in Deutschland gehostet/bereit gestellt. Der Webserver aber kann...
                                19.03.2019, 22:08
                              • admin
                                Antwort auf Impressum bei HTTP 301?
                                Und noch was: ob es eine .de Domain oder eine andere Domain oder eine bit.ly Weiterleitung ist, ist meiner Meinung nach ebenfalls irrelevant. Entscheidend ist die Bereitstellung von Inhalten - Du bist damit in der Verantwortung und wenn es nur ein Link und ein Wort ist.
                                19.03.2019, 21:45
                              Lädt...
                              X