CSSが正しく、オブジェクトの位置に

EDITを称えるために失敗したiOS WebKitのオブジェクトフィットは：もともと間違ったiOSのバージョンが言っていた（それは基本的に最新だ、9.3.5）CSSが正しく、オブジェクトの位置に

EDIT：質問を編集した親切な魂のおかげでスニペットを含める私のクロームブラウザが質問エディタでスニペットの編集を許可していない理由がわかりません。

ファーストアップ：この質問のスタックスニペットを作成しようとしましたが、残念ながらスニペットエディタではchromebookのchromeのコードを編集できません。私はスタックオーバーフローがスタックスニペット形式にjsfiddleリンクを変換する単純なインポータを書くのではないことを完全にはわかりません。エディタが動作しない場合、私は多くの誤ったカットアンドペーストコードとリンクの質問形式に頼らざるを得ません。

私の問題は、それが最善だけ、第2のロードのモバイルウェブの問題ですので、とにかく私のバイオリンのためのリンクは、そのフィドルのためhttps://jsfiddle.net/vwm2opf7/1/

「全画面表示」のリンクは

https://jsfiddle.net/vwm2opf7/1/embedded/result/

（ありさリンクをクリックして問題を確認してください）。

コード部分はここにある

html { 
 
    font-size: 16px; 
 
    font-family: Arial; 
 
} 
 
body { 
 
    overflow: hidden; 
 
} 
 
#div_page_header { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 140px; 
 
    color: #FFFFFF; 
 
    background-color: #102339; 
 
} 
 
#div_image_banner { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
    right: 10px; 
 
    bottom: 10px; 
 
} 
 
#img_banner_pic { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-position: top left; 
 
    object-fit: contain; 
 
}

<body> 
 
    <div id="div_page_header"> 
 
    <div id="div_image_banner"> 
 
     <img alt="logo" src="http://www.graphicdesignbylisa.com/wp-content/uploads/generic-logo.jpg" id="img_banner_pic"> 
 
    </div> 
 
    </div> 
 
</body>

私はロゴのグラフィックオートスケール、およびはめ込み10pxの左上から、と合わせてスケーリング見るためにそれを期待していアスペクト比を維持したまま青色のボックスの底から垂直方向に10ピクセルまで拡大します。基本的には、まさにこのように：

今デスクトップ上のクロムで、それはアンドロイドクロムに正しくを振る舞い、それはまた、正常に動作します。 iOS 9.3.5を実行しているiPhone 4Sで任意のブラウザ（例：サファリ、クローム、オペラ、ラストパスブラウザなど）を使用すると、青いパネルの中央にロゴ画像が表示されます。私はそれをWebkitの問題と仮定しています。

私は正確にスケーリングして、ロゴを配置するためにCSSのみのソリューションの後です。

2 divアプローチの理由は、私は（少なくともデスクトップで）オブジェクトの位置をインセットで正しく動作させるための唯一の方法がこれを実行して100％を使用できることです幅と高さ。 calc（100％-20px）でも正しく動作しません。差し込み印刷の理由は、異なるサイズの画面の位置を微調整するためにメディアクエリを使用しているからです。（この例ではありませんが、これを行うと複雑さが軽減され、質問を終える前にソリューションを見つけることが多いため、問題を示すためにサンプルコードを最小限に抑えることをお勧めします）

出典

2016-09-05 unsynchronized

はい、Safari 7.1- 9。1サポートobject-fitなくobject-position（object-fit on caniuseを参照）

もIE9 +

出典

2016-09-05 06:24:10

でobject-fitを修正しますobject-fit-imagesのようなポリフィルを使用するよりも、他のその周りまさか私がそのポリフィルhttps://jsfiddle.net含まれるようにjsfiddleを更新します/ vwm2opf7/18 /それはオブジェクトの位置のために適切に動作していないようです。正しく実装していますか？埋め込みバージョンhttps://jsfiddle.net/vwm2opf7/18/embedded/result – unsynchronized

はい、polyfillのreadmeを読んでください。あなたは 'font-family'を見逃しています：https://jsfiddle.net/8twumunh/ –

cool。ありがとう。私はフォントファミリについては認識していなかった – unsynchronized

CSSが正しく、オブジェクトの位置に

答えて

関連する問題