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

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.

    1. object-position wirst Du vllt auch brauchen.

    2. 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

      1. 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.
  1. 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.“