1

私はさまざまな寸法の「ランダムな」写真を提供するサイトを持っています.ほとんどの写真ではないにしても、ブラウザに合わない写真もあります.スクロールせずにブラウザのビューに合わせてサイズを変更する方法を知りたいのですが.スタックオーバーフローの皆さん！

明らかに比率を維持して、https://github.com/gutierrezalex/photo-resize/を試しましたが、期待どおりに機能しませんでした。
つまり、テキスト、中央の画像、その下のその他のテキストを含む html ページです。
画像を十分に縮小する必要があるため、スクロールを使用できないようにするだけです。

4

5 に答える 5

12

この種の画像スケーリングを実現するために、JavaScript やハックは必要ありません。シンプルな CSS と HTML で問題なく動作します。（ところで、iPadとiPhoneでも。）

imgCSS 属性を使用して配置するだけheight:100%;で、DOM ツリーの親ノードの高さになります。そのノード (通常はdiv) がブラウザ ウィンドウに適切に配置されていることを確認してください。

次のようなことを試してください：

<div style="position:fixed; height: 100%; width: 100%; top:0;left 0;">
  <img src='whatever.png' style="height: 100%" />
</div>

このページをデモとしてチェックしてください: andrehelbig.fotograf.de . ここでは、背景画像は常にブラウザ ウィンドウ全体に比例して拡大縮小されます (JS のスクロールにイライラしないでください)。

それが少し助けになることを願っています。

于 2012-10-14T17:32:24.033 に答える
0

古い質問ですが、将来のグーグルのために、多くのオプションで画像のサイズを自動変更できるjQueryプラグインを作成しました:

https://github.com/GestiXi/image-scale

于 2014-02-26T18:22:47.303 に答える
0

簡単な解決策があります。

画像にクラスを追加し、jquery を使用して画像のサイズを自動的に変更します。ここにコード：

<img src="" id="imgFitWindowResize">

jquery を使用して、クライアントがブラウザのサイズを変更したときに自動幅を初期化します: ここにコード:

<script type="text/javascript" language="JavaScript">
  function set_body_width() { // set body height = window height
    var wh = $(window).width();
    $(".imgFitWindowResize").width(wh);
  }
  $(document).ready(function() {
    set_body_width();
    $(window).bind('resize', function() { set_body_width(); });
  });
</script>

私はこのコードを試してみてください:)

于 2014-12-05T01:06:24.627 に答える
-1

このコードを試してみてください。image src をイメージ ソースに置き換えます。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

$(document).ready(function() {
var h = $(window).height();
var w = $(window).width();
document.getElementById('img_canvas').style.height= h +'px';

});

</script>
</head>
<body>

<img id="img_canvas" src="images.jpg" style="width:100%;height:auto;">
</body>
</html>
于 2014-05-24T07:52:40.083 に答える