Wie man ein Bild automatisch skaliert, um es an das Browser-Fenster mit Bezug zur Höhe anzupassen

Ich versuche ein Bild an das Browser-Fenster in Bezug auf seine Höhe anzupassen und dynamisch auf die Fenstergröße zu reagieren.Wie man ein Bild automatisch skaliert, um es an das Browser-Fenster mit Bezug zur Höhe anzupassen

Ich brauche das Bildseitenverhältnis, um gleich zu bleiben, aber das Bild kann größer sein als seine ursprüngliche Auflösung, wenn es auf großen Bildschirmen betrachtet wird.

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

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

Here is an example of what I am trying to achieve.

Quelle

2016-08-09 Breageside

'ich versuche ...'. Teile, was du versuchst. Dies ist sehr einfach mit 'Höhe: 100%; width: auto; 'oder mit einem' background-size: cover' –

Probieren Sie dieses js-Plugin http://johnpolacek.github.io/imagefill.js/ – Jason

@Jason das ist ein 'Hintergrund-Größe: Cover' mit' Hintergrund Position: Mitte Mitte ". Machen Sie diese zwei Zeilen besser als ein Plugin, das von jQuery abhängig ist, um diese zwei Zeilen zu schreiben. –

Es ist nicht klar, was Sie bisher versucht, und wir don‘ t keinen Code sehen. Ich werde versuchen, trotzdem zu antworten und vielleicht wird es dir helfen.

Wenn Sie mit Responsive-Layouts arbeiten, sollten Sie zunächst versuchen, Ihre Elemente mit viewport height and width zu skalieren. Dies hilft Ihnen, Ihren Inhalt relativ zur Browsergröße zu halten - egal, ob die Größe geändert wurde oder wie groß der Bildschirm ist.

Dieser Code könnten Ihnen helfen, eine ansprechende Bild auf Ihrer Website einfügen:

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

Arbeitsbeispiel here

In diesem Beispiel wird div 80% beiden Fensterhöhen bemessen und Breite, so dass es nie mehr als das Ansichtsfenster. Max. Maße von img sind 100% der div und height:auto; sichert, dass es sein Seitenverhältnis bewahrt. Image passt dann ein div an das Maximum erlaubt. Sie können das Bild bequem zentrieren, indem Sie display:table-cell; vertical-align:middle; text-align:center; auf das DIV setzen.

wäre eine andere Lösung:

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

es here Check out

Quelle

2016-08-09 08:46:17 freewheeler

Danke für die eingehende Antwort. Genau das suche ich.Wie kann ich einen weißen Rand um dieses div legen, ohne dass das Fenster scrollt? – Breageside

Ich habe nur den gelben Hintergrund verwendet, um die relative Größe des DIV zu dem Bild zu demonstrieren. Überprüfen Sie https://jsfiddle.net/ecj81dex/5/ – freewheeler

@Breageside, Sie können die Gliederung verwenden: {any-width} solid #fff; – Eggineer

so etwas wie Ihr exemple zu tun, können Sie background-size:cover verwenden.

cover 
Maßstab das Bild, während seine innere Seitenverhältnis beibehalten wird (falls vorhanden), um die kleinste Größe, so daß sowohl seine Breite und seine Höhe vollständig die Hintergrund Positionierbereich abdecken kann.

Dies stellt sicher, dass das Hintergrundbild alles abdeckt. Es wird auf das Verhältnis des Bildschirms je keine sichtbaren background-color jedoch sein, einen großen Teil des Bilds abgeschnitten

Auch diese Plunker sehen könnte: https://plnkr.co/edit/khXfLdsUV5aIJlTo4SSl?p=preview

Quelle

2016-08-09 08:14:36 Maxouhell

Wie man ein Bild automatisch skaliert, um es an das Browser-Fenster mit Bezug zur Höhe anzupassen

Antwort

Verwandte Themen