3

私は解決策を次から次へと読み、あらゆる種類のことを試してみましたが、これが正しく機能することはありません...

ブラウザ ウィンドウの現在の高さに基づいて、画像のサイズを動的に変更したいと考えています。現在、画像の下のコードを使用すると、元の高さがブラウザ ウィンドウよりも大きくなり、垂直スクロールバーが表示されます。

注：同じ量のテーブルとセルを使用してこれを達成したいことに注意してください。単一のテーブルソリューションを教えてください。

<html>
  <head>
    <style>
      body
      {
        text-align: center;
        margin: 0px;
        margin-left: auto;
        margin-right: auto;
      }
      table.one
      {
        border-collapse: collapse;
      }
      table.two
      {
        border-collapse: collapse;
      }
      img
      {
        max-height: 100%;
      }
    </style>
  </head>
  <body>
    <table class="one" cellpadding=0>
      <tr>
        <td>
          <table class="two" cellpadding=0>
            <tr>
              <td>
                <img src="myimage.jpg">
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>
4

3 に答える 3

8

ビューポート単位を使用して、ブラウザ ウィンドウのサイズに基づいてサイズを変更できます。

img {
    max-height: 100vh;
}
于 2013-08-10T18:13:56.893 に答える
1

を追加しimg {display:block;}ます。これにより、下部の数ピクセルが取り除かれます。

またtd {padding:0;}、同じことを行いますcellpadding=0が、HTML5 ソリューションです。

編集：これを試してみてください。私にとっては同じようです：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Untitled</title>
    <style type="text/css">
        body {margin:0; padding:0;}
        table {border-collapse:collapse; border-spacing:0;}
        td {padding:0;}
    </style>
</head>
<body>
    <table style="background:#888;">
        <tr style="background:#f88;">
            <td style="background:#8f8;">I should</td>
            <td style="background:#88f;">look the</td>
        </tr>
        <tr style="background:#ff8;">
            <td style="background:#8ff;">same across<td/>
            <td style="background:#f8f;">different browsers</td>
        </tr>
    </table>
</body>
</html>
于 2013-08-10T18:29:57.150 に答える
-3

Jquery imagescale でこれを試してください:

<img id="img1" src="myimage.jpg">

    $(document).ready(function(){ 
      $('#img1').imgscale({ 
        parent : '.parentcontainer',
        fade : 1000 
      }); 
    });

最初に親コンテナーの幅と高さを次のように定義することを忘れないでください。

.parentcontainer {
  height: 100%; 
  width: 100%; 
}
于 2013-08-10T17:06:49.573 に答える