webentwicklung-frage-antwort-db.com.de

So ändern Sie die Größe eines Bilds automatisch, um es an das Browserfenster in Bezug auf die Höhe anzupassen

Ich versuche, ein Bild in Bezug auf seine Höhe an das Browserfenster anzupassen und dynamisch auf die Fenstergröße zu reagieren.

Ich möchte, dass das Bildseitenverhältnis gleich bleibt, aber das Bild kann größer sein als die ursprüngliche Auflösung, wenn es auf großen Bildschirmen angezeigt wird.

Ich möchte nicht, dass das Bild außerhalb des Bildschirms verschüttet wird und einen Scolling-Effekt erzeugt.

Das Bild muss sowohl vertikal als auch horizontal im Container zentriert bleiben.

Hier ist ein Beispiel dafür, was ich zu erreichen versuche.

2
Breageside

Es ist nicht klar, was Sie bisher versucht haben, und wir sehen keinen Code. Ich werde trotzdem versuchen zu antworten und vielleicht hilft es dir.

Versuchen Sie beim Arbeiten mit reaktionsschnellen Layouts immer, die Größe Ihrer Elemente mit viewport height and width festzulegen. Auf diese Weise können Sie Ihren Inhalt im Verhältnis zur Browsergröße halten - unabhängig davon, ob Sie die Größe ändern oder wie groß der Bildschirm ist.

Mit diesem Code können Sie möglicherweise ein responsives Bild in Ihre Site einfügen:

div {
   width:80vw;
   height:80vh;
}
img {
   max-width:100%;
   height:auto;
   max-height:100%;
}

Arbeitsbeispiel hier

In diesem Beispiel beträgt die Größe von div 80% der Höhe und Breite des Fensters, sodass das Ansichtsfenster nie überschritten wird. Max. Maße für img sind 100% der div und height:auto; sichert, dass das Seitenverhältnis beibehalten wird. Das Bild passt dann ein Div auf das maximal zulässige Maß. Sie können das Bild bequem zentrieren, indem Sie display:table-cell; vertical-align:middle; text-align:center; auf DIV setzen.

Eine andere Lösung wäre:

 background-image:url(' ');
 background-size:contain;
 background-repeat:no-repeat;
 background-position:center;

Probieren Sie es aus hier

12
freewheeler

Mit der Eigenschaft object-fit CSS können Sie auf einen Container verzichten:

img {
  height: 100vh;
  width: 100%;
  object-fit: contain;
}

Siehe die Browser-Unterstützung .

0
Aidan Feldman

Um so etwas wie ein Beispiel zu machen, können Sie background-size:cover verwenden.

cover

Skalieren Sie das Bild unter Beibehaltung des ihm eigenen Seitenverhältnisses (falls vorhanden) auf die kleinste Größe, sodass sowohl seine Breite als auch seine Höhe den Hintergrundpositionierungsbereich vollständig abdecken können.

Dadurch wird sichergestellt, dass das Hintergrundbild alles abdeckt. Es wird kein sichtbarer background-color angezeigt. Abhängig vom Bildschirmverhältnis kann jedoch ein großer Teil Ihres Bildes abgeschnitten werden

Siehe auch diesen Plunker: https://plnkr.co/edit/khXfLdsUV5aIJlTo4SSl?p=preview

0
Maxouhell