アスペクト比、CSSを使用し、画像が正しくレンダリングされませんか？

これはブラウザのレンダリングの問題か間違ったCSSかどうか疑問に思っています。定義済みのアスペクト比でdivを拡大/縮小するには、トランスペアレントイメージを子要素として使用するのが良い方法です。私はここに小さなデモがあります。この質問が必要です。アスペクト比、CSSを使用し、画像が正しくレンダリングされませんか？

しかし、100％の高さが必要な場合はどうしてうまく動作しません。

私はこれをFF10、Safari 5.1.2、IE8、IE9でテストしました。（ie8のみが正しくレンダリングされているようです...）

誰かが問題を説明して解決策を考え出すことができますか？あなたは、あなたが幅の自動設定時にwidth:autoとwidth:100%間

1.Different、：あなたの質問を表示した後

よろしく、のRik

<!DOCTYPE html> 
<html lang="uk"> 
<head> 
    <title>test</title> 
    <style> 
     html 
    , body { 
     margin: 0; 
     padding: 0; 
     width: 100%; 
     height: 100%; 
     background: green; 
    } 

/* AUTO WIDTH - doesnt render correct when scaling the browser window to a smaller size */ 
    .holder1 { 
     position: relative; 
     display: inline-block; 
     height: 100%; 
     width: auto; 
     background: yellow; 
     border-right: 1px solid red; 
    } 

    .holder1 .ratio { 
     display: block; 
     height: 100%; 
     width: auto; 
    } 

/* AUTO HEIGHT - works fine */ 
    .holder2 { 
     position: relative; 
     display: inline-block; 
     height: auto; 
     width: 100%; 
     background: yellow; 
     border-right: 1px solid red; 
    } 

    .holder2 .ratio { 
     display: block; 
     height: auto; 
     width: 100%; 
    } 


    </style> 
</head> 
<body> 
    <span class="holder1"> 
     <img src="/images/empty_image.png" class="ratio" alt="Ratio image"> 
    </span> 
</body> 
</html>

出典

2012-02-21 Rik

'width'プロパティは ''（ 'display：inline'を持っているので意味がありません）ので、.holder2に対しては何もしません。 –

@Alexander .hoder2はデモでは実際には使用されていません（マークアップには表示されません） –

、私はいくつかのアイデアを持っているし、あなたのコードのための提案しますブラウザはこの幅を処理したままで、異なるブラウザごとにwidth:autoを処理します。 width:100%を使用すると、ブラウザがフル幅を持つように拡張する必要があります。これが私の考えです。しかし、あなたのdivはすべてのクロスブラウザで100％拡張できることを確かめてください.CSS min-width:100%を追加してください。相対的な、あなたが記述する必要があります。

position:relative = position:static

あなたがポジションを使用、このような状況では、このコード行は、何の意味を持たない相対：あなたのCSS 2.About

は、私はあなたが位置を見て必要要素の相対的な位置はどこにありますか？上または左に追加します。

お手伝いができたら幸いです！

出典

2012-02-22 08:55:07

実際、 'position：relative'に関するあなたの発言は全く真実ではありません。あなたが 'position'を指定しなかったのと同じ場所に表示されるのは間違いありませんが、要素はfloat、z-indexなどの点で異なって動作します。（私はOPの例では重要ではないが、彼の実際のウェブサイトに違いを生むかもしれない） –

うん、私は彼に言いました、このコード行は彼の例では意味がありませんが、あなたが言ったように、それは 'position：relative'のようなスタイルを持つ他の子要素を持っています。 –

@MrLister、z-indexがどのように位置を変えることができるか教えてください。多分、それが私にCSSの詳細を知ってもらうのに役立ちます、ありがとう！ –

アスペクト比、CSSを使用し、画像が正しくレンダリングされませんか？

答えて

関連する問題