Ich muss Bilder zentrieren, die breiter sind als das Eltern-Div, das sie enthält. Das Eltern-Div hat eine feste Breite und der Überlauf ist auf Versteckt gesetzt.
%Vor%Ich muss ein Bild als untergeordnetes Element verwenden, da ich die Größe der Miniaturansichten anpassen muss und nicht auf die Hintergrundgröße zurückgreifen kann, da dies bei älteren Versionen von Mobile Safari nicht erforderlich ist. Ich kann auch Javascript dafür nicht benutzen, also muss es eine css Lösung sein.
Noch eine Sache, die zu beachten ist, ist, dass die Breite zwischen den Bildern variieren kann, so dass ich nicht einfach die absolute Positionierung auf dem Kindelement an einem hartkodierten Offset verwenden kann.
Ist das möglich?
UPDATE:
Für die Nachwelt habe ich gerade herausgefunden, dass dies mit den älteren Versionen von Mobile Safari unter Verwendung von
erreicht werden kann %Vor%Natürlich wird der Hintergrund wie üblich mit 50% für die linke Positionierung festgelegt. Wenn Sie dies in einem anderen Browser arbeiten müssen, ist die akzeptierte Lösung wahrscheinlich die beste, aber da diese Frage mit dem iPhone verbunden war, ist diese Lösung ein wenig sauberer.
Wie negativ sind Sie für zusätzliche Markups? Gibt es auch eine maximale Größe für die Bilder? Zum Beispiel, wenn Ihre maximale Bildbreite 225px ist, dann könnten Sie versuchen:
%Vor%Ein Geigenbeispiel hier: Ссылка
Würde ein Hintergrundbild nicht funktionieren? Sie sollten die Größe nicht ändern müssen. Macht so etwas Sinn? Ссылка
%Vor%Nun, wenn Sie die Breite des div und die Breite des Bildes kennen, können Sie einfach etwas Mathe machen.
Nehmen wir an, das div hat eine Breite von 200px und das Bild eine Breite von 300px:
%Vor%Da die Breite des div 200 Pixel beträgt, werden 100 Pixel aus dem Bild abgeschnitten. Wenn Sie das Bild zentrieren möchten, werden 50 Pixel hinter den Grenzen des div auf jeder Seite verborgen. Daher setzen wir die linke Position des Bildes auf -50px.
Beispiel (Kenntnis der Bildgröße): Ссылка
Macht das Sinn?
Wenn Sie die Bildgröße oder die div-Größe nicht kennen, können Sie JavaScript verwenden, um diese Werte zu erkennen und dasselbe zu tun.
Beispiel (ohne die Bildgröße zu kennen, mit jQuery Javascript): Ссылка
Nur zu Referenzzwecken, hier ist das Originalbild .
Tags und Links css
