Css Bildposition relativ in Safari ignoriert

Ich habe eine Galerie mit Bildern, wie dieser (vereinfacht) strukturiert:Css Bildposition relativ in Safari ignoriert

<div class="gallery"> 
    <figure class="gallery-item"> 
    <a class="gallery-item-link"> 
     <img /> 
    </a> 
    </figure> 
<figure class="gallery-item"> 
    <a class="gallery-item-link"> 
     <img /> 
    </a> 
    </figure> 
</div>

.gallery ist ein Flex-Container, der 3 Elemente auf größeren Bildschirmen passen sollte.

Mein Problem ist mit der zentralen Positionierung der Bilder innerhalb .gallery-item-link.

Das entsprechende Stück CSS ist

.gallery-item-link img { 
    display: block; 
    max-width: 100%; 
    position: relative; 
    left: 50%; 
    transform: translateY(-50%); 
}

Die Größen und Verhältnisse der Bilder variiert werden kann, so kann ich nicht für das Seitenverhältnis auf padding Trick verlassen.

In Chrome, ist es das, was die Galerie wie folgt aussieht:

In Safari, und das ist das Problem:

Hier ist der Stift, das Problem zu veranschaulichen, ist: http://codepen.io/afkatja/pen/EWEMNb

Am I etwas vergessen/vergessen?

EDIT: scheint das Problem etwas mit align-items: stretch zu tun zu haben, das in Safari wahrscheinlich nicht richtig funktioniert (oder einfach ignoriert wird?)?

EDIT: Ich verwende Safari 10.0.3

Quelle

2017-03-22 afkatja

Ich versuchte, nicht festgelegt ist (unter verschiedenen anderen Dingen) display: table-cell; vertical-align: middle; Verwendung für Bilder, die unvorhersehbare Ergebnisse hervorbrachten und so hakig wirkten.

Ich löste schließlich das Problem, indem flexbox für Bild Behälter mit:

display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;

ich den Stift hier aktualisiert: http://codepen.io/afkatja/pen/EWEMNb

in neuesten Getestet Chrome, Safari (beide Desktops und iOS), Firefox, MS Kante & IE11.

Quelle

2017-03-30 10:10:12 afkatja

Versuchen

.gallery-item-link img { 
    position: relative; 
    display: block; 
    max-width: 100%; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50% -50%); 
}

Quelle

2017-03-22 11:27:51 thisiskelvin

Ich habe den Stift aktualisiert. Dieser Vorschlag scheint nichts zu ändern. – afkatja

Welche Version von Safari benutzt du? – thisiskelvin

Es kann mit dem Transformationsursprung zu tun haben: unten links; CSS-Regel. Kommentieren Sie dies oder wechseln Sie zu transform-origin: oben links; – thisiskelvin

Sie die Richtung falsch x & y haben. es sollte statt Y. versuchen diese translateX werden:

.gallery-item-Link img {

display: block; 
    max-width: 100%; 
    position: relative; 
    top : 50%; 
    left: 50%; 
    transform: translate(-50% -50%);

}

Quelle

2017-03-22 11:43:10

Welche Richtung für x & y habe ich falsch verstanden? Überprüfen Sie meinen Stift, ich habe 'translateX (-50%) translateY (-50%) '. – afkatja

ich vor dieses Problem. Wahrscheinlich kann das 'relative' Bild nicht erkennen, wie groß 50% ist, wenn das Elternelement keine bestimmte Höhe wie 'px' hat.

ist hier eine andere Art und Weise zu tun, was Sie wollen ... sry ich Ihre 'relative' Problem

&__item__link { 
    display: block; 
    height: 100%; 
    white-space:nowrap; 
    text-align:center; 
    text-decoration: none; 
    &::after{ 
    content:''; 
    display:inline-block; 
    vertical-align:middle; 
    height:100%; 
    } 
    img { 
    display:inline-block; 
    vertical-align:middle; 
    max-height: 100%; 
    // position: relative; 
    // @include center-all; 
    transform-origin: bottom left; 
    @include transition; 
    &:hover { 
     opacity: .8; 
    } 
    }

http://codepen.io/linjiyeah/pen/XMEwpb

Quelle

2017-03-22 12:21:27 LinJI

Css Bildposition relativ in Safari ignoriert

Antwort

Verwandte Themen