Ich arbeite an einem responsiven Design, das Fotos in einem Raster präsentiert. Die Fotos selbst können in allen Seitenverhältnissen und Größen vorliegen. Außerdem haben die Gitterzellen, in denen sie platziert sind, keine feste Breite, sie skalieren bei der Größenanpassung des Browsers. Außerdem hat jede Gitterzelle, obwohl sie in Breite und Höhe dynamisch ist, die gleiche Größe, unabhängig vom Bild darin.
Um Fotos in dieser hochdynamischen Situation richtig darzustellen, habe ich ein Arbeitsrezept gefunden: Jedes Foto ist im Grunde ein div mit dem Bild als Hintergrundbild. Um die unbekannte Breite / Höhe des Bildes in einem Raster dynamisch zu skalieren, nutze ich CSS3s Hintergrund-Größe: Cover-Funktion.
Das Endergebnis ist fabelhaft, es macht genau das, was ich in Bezug auf Benutzeroberfläche und Anzeige will. Dennoch bin ich nicht zufrieden mit der eingeschränkten Zugänglichkeit dieser Lösung: Sie ist nicht SEO-freundlich und nicht Plugin-freundlich (denke an Social Plugins). Deshalb versuche ich, die Arbeitssituation zu reproduzieren, die ich habe, aber dieses Mal benutze ich gute alte img-Tags anstelle von CSS-Hintergründen.
Ich weiß, dass es IE8 und darunter Polyfills für Hintergrundgröße gibt: Cover, aber ich suche nicht nach, ich suche nach einer Lösung, die auf Img-Tags basiert. Ich fand auch Artikel, die absolute Positionierungstechniken sowie die Clip-Eigenschaft von CSS verwenden, aber denken Sie daran, dass nichts an meinem Design absolut groß ist.
Ich suche nach einer JavaScript-Routine, die die Logik der Hintergrundgröße hat: Cover für die dynamische Größenanpassung, in einer Situation, in der sowohl die Quelle (Bilddimensionen) als auch das Ziel (Anzeigefeld) dynamisch sind .
Gibt es ein Javascript, das der Hintergrundgröße entspricht: Cover, das auf Img-Tags funktioniert?
Das ist alt, aber ich habe kürzlich eine neue Lösung gefunden.
Anstatt das Bild so zu erstellen, dass Sie das Hintergrundbild eines divs anzeigen möchten, erstellen Sie ein Bild:
%Vor%Legen Sie ein umschließendes div als die Breite / Höhe fest, die das Bild haben soll. Setzen Sie das Bild dann als 100% Breite / Höhe und setzen Sie den src auf den gewünschten Bildausschnitt. Stellen Sie auch das gewünschte Bild als Hintergrundbild für das Bild ein. Legen Sie die zu bedeckende Hintergrundgröße und die Auffüllung auf 50% fest.
Der Trick ist die Polsterung bei 50%. Die img width / height ist fest eingestellt, so dass das Bild immer kleiner wird, wenn Sie die Füllung erhöhen. 50% ist genau wie viel es benötigt wird, um es zu verstecken, und jetzt sehen Sie nur das Hintergrundbild des Bildes, das angezeigt wird, wie Sie wollen, aber es ist immer noch zugänglich!
Wenn ich an Zugänglichkeit und SEO denke, habe ich eine Lösung für ein sehr ähnliches Problem mit jQuery erstellt, es reproduziert nicht die Logik der Hintergrundabdeckung, sondern verwendet sie.
Die Bilder werden tatsächlich zur Rolle des Containers mit dem Hintergrund und die Hintergrundabdeckung wird programmatisch hinzugefügt.
%Vor%Ich glaube, es gibt zwei Dinge, die Sie tun möchten:
Das Problem ist (wenn Sie das Seitenverhältnis des Bildes beibehalten wollen), dass Sie es sowohl vertikal als auch horizontal zentrieren müssen, abhängig von der Bild- und Browsergröße.
Sie können eine reine CSS-Lösung mit einer Kombination aus display:table und margin:0 auto zusammen mit intelligenten Einstellungen für Höhe / Breite erstellen.
Siehe die Geige: Ссылка
%Vor%