CSS圖像位置的相對的Safari

忽略我有圖像的圖庫，結構是這樣的（簡化）：CSS圖像位置的相對的Safari

<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是一個柔性容器，其應適合於更大的屏幕3項。

我的問題是在.gallery-item-link內的圖像集中定位。

相關片的CSS的是

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

的尺寸和圖像的比例可以改變，所以我不能依靠padding特技寬高比。

在Chrome中，這是畫廊的樣子：

在Safari中，這就是問題所在：

這裏是爲了說明問題筆：http://codepen.io/afkatja/pen/EWEMNb

上午我忘記/缺少的東西？

編輯：這個問題似乎與align-items: stretch有關，可能無法在Safari中正常工作（或只是忽略？）？

編輯：我使用Safari 10.0.3

來源

2017-03-22 afkatja

我想（在各種其他的東西）圖像產生不可預知的結果，看起來很冒險。

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

我在這裏更新了筆：

我最終用flexbox圖像容器解決了這個問題http://codepen.io/afkatja/pen/EWEMNb

在最新測試過的瀏覽器，Safari瀏覽器（包括臺式機和iOS），火狐，MS邊緣& IE11。

來源

2017-03-30 10:10:12 afkatja

嘗試

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

來源

2017-03-22 11:27:51 thisiskelvin

我更新了筆。這個建議似乎沒有改變任何東西。 – afkatja

您使用的是哪個版本的safari？ – thisiskelvin

它可能與transform-origin：左下方相關; css規則。註釋掉或更改爲transform-origin：左上角; – thisiskelvin

您已經爲X &Ÿ錯誤的方向。應該平移X代替Y.試試這個：

名爲.gallery項目鏈接IMG {

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

}

來源

2017-03-22 11:43:10

x和y的哪個方向我錯了？檢查我的筆，我有'translateX（-50％）translateY（-50％）'。 – afkatja

我以前有這個問題。當父元素沒有像'px'這樣的指定高度時，'相對'圖像可能無法得到50％的高度。

這裏是另一種方法做你想要的... SRY我不能使用固定爲display: table-cell; vertical-align: middle;您的「相對」問題

&__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

來源

2017-03-22 12:21:27 LinJI

CSS圖像位置的相對的Safari

回答

相關問題