画像はクロームで正しく表示されますが、FirefoxやIE

Question

にそうhtml.erb文書に私はそれにして、テーブルを持っており、そのテーブルにそのようなカラムのサイズにスケーリングされた画像ではありません。

<table width="900" border="0" align="center" valign="top"> 
     <tr> 
     <td><img src="someimage.gif" width="35%" height="95%" /></td> 
     <td>a whole bunch more html content here</td> 
     </tr> 
    </table> 

Chromeではうまくいきますが、何らかの理由でIEやFire Foxでページを読み込んだときに、画像が元のサイズで表示されます。私は同じ問題が発生した

<img src="someimage.gif" style="height:95%;width:35%"/> 

が、再び：私は身長と体重のプロパティではなく、このような行のCSSにいくつかに置き換える削除しようとしました。 Chromeではうまく動作しますが、他の2つではうまく動作しません。互換性の問題を引き起こしている可能性があることを誰かが知っていますか、それを修正したり回避するために何ができるのですか？

編集：私はおそらく、外部CSSファイルの両方で絶対位置と相対位置を引数として使用してイメージのサイズを定義した後、そのサイズのピクセル値を後で削除したHTML5のimgタグの高さと幅のセクションのCSSコードいずれのブラウザでもズームを行うと、サイトの全体的な見た目が崩れてしまいました。そのため、パーセント値を使用して切り替えました。

Answer 1

ブラウザは、コンテンツの幅を決定するまで列の幅を判断できません。あなたの場合、内容の幅は列の幅に依存します。ブラウザや画像がキャッシュに存在するかどうかによって、予期しない結果が得られます。

カラムの幅と高さを指定すると、予想通りの一貫性のある結果が得られます。 See demo here。

Answer 2

Firefoxのためにあなたは一例

<td> 
    <div style="background: url(someimage.gif); background-size: 100% 100%; width: 35%; height: 95%;"> 
    </div> 
</td> 

のCSS背景のサイズを試みることができるか、あなたはjQueryのを試みることができるが、今ここにjQueryのは、あなたのHTMLはこの

<table width="900" border="0" align="center" valign="top"> 
    <tr class="image_tr"> 
    <td class="image_td"><img class="image" src="someimage.gif"/></td> 
    <td>a whole bunch more html content here</td> 
    </tr> 
</table> 

のように見えなければならないでしょう

$(document).ready(function(){ 
    var height_percent = $("table .image_tr").height()/100; 
    var width_percent = $("table .image_td").width()/100; 

    $(".image").height(height_percent * 95); 
    $(".image").width(width_percent * 35) 
}); 

Answer 3

テーブル内のtdの幅を定義してみてください。インターネットエクスプローラでよく見当たらないことがあります:)

Answer 4

すべてのブラウザで画像の縮尺が変わります。 border="0"をborder="1"に変更すると、これが表示されます。異なるブラウザーは、特にこのようなトリッキーなケースでは、異なる列幅割り振りアルゴリズムを表に適用します。使用可能な幅、基本的にセル幅、およびセル幅の35％にスケーリングされるようにイメージを要求しているのは、とりわけセルの内容に依存します。同様の考慮が高さに適用されます。

この問題を解決するには、特定のブラウザの特定のテーブル書式設定アルゴリズムに依存しないように、必要な外観を指定する必要があります。