画像コンテナの高さ100％ - Chrome/Safariで最小高さが異なる動作

Question

画像にコンテナの高さを塗り潰してから、object-fit: coverを使用してアスペクト比を管理します。 Chromeでは、これが望ましい効果を達成します。しかし、Safariでは、含まれている部門が非常に高くなりました。

http://codepen.io/anon/pen/GjzPvN

なぜChromeとSafariの間に矛盾があるのでしょうか？どちらが正しいのか、またSafariが正しい場合、これを実現するための良い方法がありますか？好ましくはposition: absoluteを使用しないでください。私は最高のブラウザのサポートについては、そのbrowser support

のあなたが必要なものを行うためにobject-fit:を使用することはありません

Answer 1

私はあなたが実際にあなたの説明が間違っているとして、それがどのように機能するかを理解していない

img { 
    width: 100%; 
    min-height: 100vh; 
    object-fit: cover; 
} 

Answer 2

、あなたは、画像の代わりにこのような背景画像を使用できます。

.row 
    .medium-8.columns 
    a.link#image-1 href="" # I use and id to manage the background image but you could use a class or even inline style (not suggested) 

    .medium-4.columns 
    a.link#image-2 href="" 

を

そして、あなたのCSS：

/* I fix the container height to fit the 100% of the page */ 
html, body, .row, .row > div { 
    height: 100%; 
} 

/* If you want a fixed height you could add it here and remove the style above. */ 
[id^="image-"] { 
    background-size: cover; /* This could be "cover" or "100% 100%" 
    The difference is that the second distor the image to make it fit.*/ 
    background-position: center; 
} 

#image-2 { background-image: url(http://placehold.it/300x150); } 
#image-1 { background-image: url(http://placehold.it/400x300); } 

はここに私のCodePen exampleです。

あなたCodePenと同じ結果をexactlye取得したい場合は、あなたが100% 100%にbackground-sizeを変更する必要がありますが、あなたが維持するために、イメージをしたい場合、それはあなたがcoverやcontainを使用することを検討すべきであるアスペクト比はだということに注意してください。 cover and contain here

Answer 3

Chromeの最高の画像に合わせて行の高さを計算するようです。 Safariは画像に応じて行の高さを計算しません。 列の高さを固定に設定しても、Safari 9.xとChromeの動作は同じではありません。左側のimgがSafariのコンテナの外側に表示されています。ブラウザーを同じように動作させるには、高さを設定してオーバーフローを隠す必要がありました。

例：

.columns { 
    padding-left: .9375rem; 
    padding-right: .9375rem; 
    min-width: initial; 
    background: blue; 
    height: 405 px; 
    overflow-y: hidden; 
} 

代わりのオーバーフロー隠さ。あなたは試すことができます：

.columns { 
    padding-left: .9375rem; 
    padding-right: .9375rem; 
    min-width: initial; 
    background: blue; 
    height: 405px; 
} 
img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
} 

はたぶん、あなたは、いくつかのjQueryを使用して2枚の画像の最高に応じて、列の高さを設定することができます。または@mediaルールを使って高さを設定します。

Microsoftブラウザでは、IE11とEDGEを含むobject-fit:がサポートされていません。 object-fit:をサポートしていないブラウザの場合は、min-heightをChromeで正しくサポートしていないため、正しくSafariが正しく動作します。object-fit-polyfill