Element zoomen auf Bildschirm Höhe/Breite ohne Verzerren für alle BildschirmTypen.

  • Hi. Wie kann man
    Elemente zB. Fotos Gif Video <iframe>
    automatisch anpassen/ zoomen auf komplette
    BildschirmHöhe vertikal 9:16
    bzw. BildschirmBreite horizontal 16:9
    und mittig ausrichten
    im jeweiligen RahmenElementZiel zB. Hintergrund für Seite, div oder span Boxen?


    Überstehende Ränder sind ok, können gern abgeschnitten werden oben/unten oder an den Seiten links/rechts,

    html-seminar.de/woltlab/attachment/2185/.


    Hauptsache_

    - Original getreu, ohne Verzerrung.

    - soll komplett bedecken, also weder längs noch seitlich zu kurzes Bild sein.


    LösungsAnsatz_
    Die geringere Länge von Element soll auf maximum gezoomt werden!
    Nur woher weis der Browser automatisch was ist die geringere Länge? Breite zu wenig im Vergleich zur RahmenBox, oder ist Höhe zu wenig von Element für Rahmen?
    Habe versucht min-width:100% und min-height:100% aber das wird irgendwie nicht angewandt.



    Wer kennt sich aus? Danke.

  • Fangen wir mit dem einfachen an, einem Bild. Da gibt es zwei Möglichkeiten:

    1. Das Bild mit CSS als Hintergrund für den Container einstellen. Dann gibt es bei CSS ein background-size: cover; das den Browser anweist, das Bild so einzurichten, wie Du es oben beschrieben hast.

    2. Das Bild allein zu verwenden. Dann gibt es bei CSS ein object-fit: cover; , das das Bild ebenfalls so einrichtet.


    Um den Container bzw. das Bild so einzustellen, dass es das Browserfenster ausfüllt, wirst Du Viewport-Units brauchen.

  • Danke. Klappt noch nicht. Hier mein Script inklusive Css



    html-seminar.de/woltlab/attachment/2188/


    html-seminar.de/woltlab/attachment/2187/

  • Frage ist nicht wie man Css einbaut, sondern Welches Css passt für speziell diese Herausforderung?_

    - Bilder Gif Videos iframe... sollen vergrößert werden/ zoomen auf RahmenElement rundum / bzw. Seite,

    - sollen horizontal mittig angeordnet werden,

    - sollen nicht verzerrt werden aber dennoch

    - ohne Ränder!


    Ist natürlich offensichtlich dass irgendetwas falsch und oder unvollständig ist.

    ---> Frage weiter offen.


    Css sollte korrekt eingebaut sein. Funktioniert, soweit, allgemein für die Seite, aber leider nicht für die Bilder des Sliders.

    Sie wisen sicher es gibt mehrere Möglichkeiten Css ein zu bauen, entweder auf externem CssDokument oder im Header,
    oder wie ich es bevorzuge zusammen mit den jeweiligen Elementen im HtmlHauptDokument an Ort und Stelle, dass ich nicht 2 Dokumente öffnen muss und hin und her scrollen. Am liebsten sind Scrips auch gleich in 1 Dokument, wenn möglich alles jeweils als funktionale kompaktest-mögliche Einheit zusammen an 1em Platz!

    zB. so

    <div class="XYZ" style="

    ...dasleben-color:rgba(8,64,128,1.0);

    ...ist:relative;

    ... schön:100%;

    ">


    Worin liegt Fehler in meinem Script, um die Bilder richtig an zu passen? Siehe hier (aktualisiert aber klappt noch nicht),


    Noch mal vielen Dank!

  • Css sollte korrekt eingebaut sein.

    Nein.

    Error: CSS: SlideBox: Parse Error. das sagt dir ein Validator dazu.

    Ich habe dein Code mal gerade bei Codepen reingemacht.

    Die Css richtig eingebunden , leicht verändert und schon geht es.

    Dann hast du das lang="DE" an der falschen stelle eingebaut

    Dann fehlt <head>.


    Css bindet man extern ein

    <link href="extgerne_css_datei.css" rel="stylesheet">

    Oder wenn es sein muss zwischen den <style> Tags.


    Das was du da gemacht hast ist Müll.

    Es gibt Bibiliotheken die das so einbinden ,die sind aber darauf angepasst.


    Also kurz gesagt , "Mach deine Css richtig ".

  • Css IST KORREKT EINGEBAUT! Dein Code klappt nicht, es bleiben (schwarze/ je nach HintergrundFarbe) -Ränder.

    Soll ohne Rand zoomen so dass die längere Weite von entweder Höhe oder an Breite -angepasst wird, über den Rand des Ausschnitts hinaus, so wie ich das illustriert hab.

  • So siehts aus, Script vereinfacht auf nur 1 Seite als Ziel, mit nur 1 Bild


    html-seminar.de/woltlab/attachment/2192/


    Hier der neue vereinfachte Code zum testen



    Falls es bei dir geklappt hat, teile mal deinen Code! Dann probier ich es mit dem TestFoto.
    Wette aber es ist selbes Ergebnis, schwarze Ränder, statt VollBildschirm [./?]

    Wär interessant.

  • Css IST KORREKT EINGEBAUT! Dein Code klappt nicht, es bleiben (schwarze/ je nach HintergrundFarbe) -Ränder.

    Soll ohne Rand zoomen so dass die längere Weite von entweder Höhe oder an Breite -angepasst wird, über den Rand des Ausschnitts hinaus, so wie ich das illustriert hab.

    Habe keine Lust da weiter drauf einzugehen.

    Auch, wenn deine CSS so laufen tut ist es trotzdem nicht optimal.

    Mein Code läuft nicht ??

    Welcher Code?

    Das ist mein Code.

    https://basti1012.bplaced.net/…rdner=html-seminar&id=407

    Da ist auch der Code mit deinen klick drinnen. Also beim mouse klicken ein Bild weiter.

    Der Code ist zwar auch noch nicht optimal aber da siehst du wie ich das mit der CSS einbinden meine

  • Danke basti1012, das funktioniert. Tolles Script!


    Trick war über Body noch im Header die

    <style>* {margin:0px; padding:0px;height: 100%;top:0px;left:0px;right:0px;bottom:0px; } </style>

    rein zu setzen. Wenn man die Definition in BodyStyle übernimmt gehts nicht.


    Jetzt noch 1 Kleinigkeit, wie kann ich Bilder horizontal mittig setzen? Da habe ich was gefunden mit Margin left right als BlockElement, aber wendet der Browser nicht an.


  • Warum benutzt du inline-styles ?

    Das ,macht man heut zu tage nicht mehr.

    Pack doch alles in <style></style> rein das ist übersichtlicher.

    Willst du bei einer Homepage von mehreren 100 Seiten das alles in den html schreiben ?


    Um das mittig zu setzen kommt es drauf an wie du deine Seite augebaut hast.

    Zb macht man das mit Flexbox anders als wie ohne Flexbox.

    Dein margin left und right auto kann man auch so schreiben

    margin:0 auto

    Dann dein background-size:cover hat meines wissens nix im img zu suchen.

    Das wird benutzt wenn man Background Bilder benutzt und das hast du ja nicht.


    top:0px;left:0px;right:0px;bottom:0px;

    Was soll das werden ?

    Ohne positions Angaben hat der Wert keine Funktion.


    Dein Code könnte auch so aussehen

    kommt bei mir das gleiche raus

  • Hi Basti1012. Warum IN LINE STYLES bevorzugt? Meine WebSeiten sind einzelne funktionale ElementPakete (ich will nicht das Wort Äpp verwenden so kompliziert auch nun wieder nicht) -welche ich modifiziere und in verschiedenen WebSeiten einbaue zB. MusikSpieler mit drehendem PlattenSpieler und PlattenAuswahl daneben alles in WabenForm wo Kacheln jeweils an richtigem Ort platziert sind/ bleiben sollen, oder Windows10Desktop nachgebaut worin Programme als DownloadLink zum original SoftwareAnbieter verlinkt sind (spart die Werbung von Installer von PcMagazinen),
    oder aktuelles Projekt NewsBriefingShow mit Bildern +wenig Text, zum schnell weiter klicken.

    Aus dem Grund ist es für meinen Bedarf erforderlich, wenn alles für sich komplett ist und kompakt zusammengepackt in 1 Dokument, alles soll direkt auf 1rsten Blick auffindbar sein! Wenn ich Styles in Head knalle/ obere DokumentHälfte, und unterer Hälfte/ Body Elemente extra rein sortier, muss man ständig hin und her blättern um etwas zu ändern. Wenn ich das Jahre später öffne und will nur 1 Element rüber kopieren fehlte das Css.
    Falls Elemente zu lang werden dafür arbeite ich mit BrowserFunktion zum Element untersuchen, da kann man die Elemente zusammen oder aus -klappen.

    Was man heute (nicht mehr) macht interessiert mich nicht (außer wenns die Browser nicht unterstützen).

    Baue das was man morgen klickt!



    // Willst du bei einer Homepage von mehreren 100 Seiten das alles in den html schreiben ?

  • Wenn Du das alles so siehst, solltest Du aber auch deine Aktivitäten bei der Webentwicklung allein im stillen Kämmerlein betreiben und nicht anderen zumuten, sich durch einen Wust von inline-Styles zu kämpfen :D

  • Wie kann man in dem BilderShowScript die BILDER MITTIG ANORDNEN? Dein Beispiel funktioniert nur mit einzelnem TestBild.

    Wenn ich das einbaue bei Bildern, wird es vom Browser wieder nicht umgesetzt, sondern Bilder rechts angeordnet, statt in Mitte zentral gesetzt.

    So sieht mein Css dafür aus

    <style> .img {object-fit: cover; background-size: cover; display: block; margin:0 auto;} </style>

    .


    Muss man das bei der SlideBox ändern? (Getestet. Funktioniert auch nicht).

    <style> .SlideBox {height:100%; width:100%; vertical-align: middle; background-color:rgba(16,32,128,0.1); background-repeat:no-repeat;} </style>



    Dein margin left und right auto kann man auch so schreiben

    margin:0 auto


    Dein Code könnte auch so aussehen

    kommt bei mir das gleiche raus

  • Kommt schon, Bilder +gestreckt +ohne Verzerrung +jetzt noch bitte MITTIG.

    Wie klappt das?

    Danke!


    LösungsAnsätze_

    .img {object-fit: cover;background-size: cover;display: block; margin-left: auto; margin-right: auto;}

    oder

    .img {object-fit: cover;background-size: cover;display: block; margin:0 auto;}



    Hier der SlideShowKasten

  • Irgendwelche Bilder. In dem Script (oben, kopieren einfügen mit TextEditor speicherm als WebSeite/ .html)
    ist HERAUSFORDERUNG Bilder sollten mittig angeordnet sein!

    Aber werden links bündig angeordnet.

  • Ich habe das Problem nicht.

    Wenn ich meinen Code nehme werden die Bilder immer so groß angezeigt wie mein Bildschirm.

    Wenn ich backgroun-size:contain nehme habe ich das Problem, was du meinen könntest.


    Das kann man da mit richten

    box.style.backgroundPosition='center center';


    Ob das mit deinen Inline-CSS funktioniert weiß ich nicht, weil ich bei deinem Code und meinen Code unterschiedliche Darstellungen habe.


    Teste es einfach mal.

    Bei mir sieht es dann so aus

    * Link entfernt, weil existiert nicht mehr *

  • Hi Basti1012. SlideShow auf Seite füllt nicht ganzen Bildschirm, links und rechts sind weiße Ränder,
    und Bilder sind vertikal nicht mittig, sondern werden oben angeordnet.


    html-seminar.de/woltlab/attachment/2201/



    Außerdem (woher das auchimmer kommt) werden bei dem im Head verankerten Styles
    WERBUNG

    diverser auf ersten Blick anscheinend nicht seriösen Seiten
    eingeblendet, jenes Phämomen existiert auch bei manchen anderen Seiten,
    die im Head Css eingebunden haben,
    immer im Zusammenhang mit OperaBrowser.

    html-seminar.de/woltlab/attachment/2200/

  • wenn ich das gezeigte bild auf 100 % breite setze ist das aber verzerrt.

    Ich wüßte nicht wie man verschieden große Bilder ohne verzerrungen auf volle höhe und breite Einbinden soll.

    Wenn man das gezeigte Bild auf 100% breite setzten würde und height auf auto, würde dann das halbe Bild außerhalb des Sichtbaren Bereichs sein.


    Ich weiß nicht mehr weiter.

    Vieleicht kann dir wer anders helfen der mit Bilder verarbeitung mehr ahnung hat.


    Der unbekannte Quellcode die man in der Console sehen kann kommt meißtens von Erweiterungen und so weiter die im Browser vorhanden sind.

    Bei den gezeigten muß ich erst mal selber kucken woher der genau kommt

Jetzt mitmachen!

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