Manuel: Bilder zoomen auf volle Bildschirm Breite/Höhe, ohne Verzerrung, sowohl 16:9 als auch 9:16, bzw. 1:1?

SELF-Forum

Bilder zoomen auf volle Bildschirm Breite/Höhe, ohne Verzerrung, sowohl 16:9 als auch 9:16, bzw. 1:1?

Manuel
– Informationen zu den Bewertungsregeln

Hi. Wie kann man Grafiken sowohl an Breite, als auch an Höhe anpassen, ohne zu verzerren, und kompletten Bereich bedecken?

Wie kann man Elemente/ Bilder, .gif, Videos, <iFrame> formatieren, dass diese passen für vertikalBildschirm, als auch horizontalBildschirm, +16:9 und +9:16 +OHNE VERZERRUNG +maximal den Bildschirm bedeckend +mittig vertikal und +mittig horizontal?

horizontal, vertikal

Dh. das Element soll vergrößert werden, dass aus dem Bildschirm herausgezoomt wird und man sieht jeweils Ausschnitt wo entweder oben+unten oder rechts+links Streifen weggeschnitten sein solle.

Habe alles probiert mit zB. min-width ... aber Browser versteht es irgendwie nicht wie ich es will.

Gedanken lesende +von Augen Wunsch ablesende Browser wurden noch nicht entwickelt. Oder die Technik ist schon so weit zu erkennen was ich will aber darauf programmiert immer das richtige zu verweigern mit Absicht? Starke Konzentration/ Fäuste ballen, anschreien, auf Tastatur schlagen... hilft nicht weiter. Anscheinend funktioniert es bei allen WebSeitenBastlern außer bei mir. Finde nichts bei den HtmlLehrSeiten. Man steht wie ein Ochse vorm ScheunenTor, sehe Wald nicht vor lauter Bäumen. Solche "Details" stehlen mir Zeit, will das fertig haben um mich auf Inhalte zu konzentrieren, um das Projekt weiter voran zu bringen. Zum Mäuse melken ist es.

Vielen Dank für richtige Lösung.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bilder zoomen auf volle Bildschirm Breite/Höhe, ohne Verzerrung, sowohl 16:9 als auch 9:16, bzw. 1:1?

    djr
    – Informationen zu den Bewertungsregeln 
    … {
  object-fit: cover;
}
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bilder zoomen auf volle Bildschirm Breite/Höhe, ohne Verzerrung, sowohl 16:9 als auch 9:16, bzw. 1:1?

      djr
      – Informationen zu den Bewertungsregeln

      object-position wirst Du vllt auch brauchen.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Bilder zoomen auf volle Bildschirm Breite/Höhe, ohne Verzerrung, sowohl 16:9 als auch 9:16, bzw. 1:1?

      Manuel
      – Informationen zu den Bewertungsregeln

      Klappt nicht. Hier ein TestSeite für nur 1 einzelnes Bild_

      <html><head>
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
<title>TestBild</title>
</head>

<body style="
	margin: 0px; 
	background: #0e0e0e;
	.imgXYZ {object-fit: cover;}
">

<img class="imgXYZ" src="TestBild.jpg"> 

</body></html>

      Ergebnis

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Bilder zoomen auf volle Bildschirm Breite/Höhe, ohne Verzerrung, sowohl 16:9 als auch 9:16, bzw. 1:1?

        Matthias Apsel Homepage des Autors (Versionen)
        – Informationen zu den Bewertungsregeln

        Hallo Manuel,

        Klappt nicht.

        4 Dinge …

        <html><head>
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
<title>TestBild</title>
</head>

<body style="
	margin: 0px; 
	background: #0e0e0e;
	.imgXYZ {object-fit: cover;}
">

<img class="imgXYZ" src="TestBild.jpg"> 

</body></html>

        Du solltest dich mit den Grundlagen beschäftigen.

        Bis demnächst
        Matthias

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Bilder zoomen auf volle Bildschirm Breite/Höhe, ohne Verzerrung, sowohl 16:9 als auch 9:16, bzw. 1:1?

    Henry
    – Informationen zu den Bewertungsregeln

    Hallo Manuel,

    Dh. das Element soll vergrößert werden, dass aus dem Bildschirm herausgezoomt wird und man sieht jeweils Ausschnitt wo entweder oben+unten oder rechts+links Streifen weggeschnitten sein solle.

    Das funktioniert als Background.

    background-size:cover; background-position:center;

    Beispiel.

    Gruss
    Henry

    --
    Meine Meinung zu DSGVO & Co:
    „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln