ブラウザの幅/高さを変更したときに、CSSで画像を動的にサイズ変更するにはどうすればよいですか？

私は、ブラウザのウィンドウと一緒に画像のサイズ変更を行うことができるか疑問に思う、ここで私がこれまで行って（またはダウンロードしたものであるZIPでサイト全体を）。

これはFirefoxでは問題なく機能しますが、Chromeでは問題があります。画像のサイズが常に変更されるとは限りません。ページが読み込まれたときのウィンドウのサイズに依存します。

これはSafariでも問題なく機能しますが、画像が最小の幅/高さで読み込まれることがあります。画像サイズが原因の可能性がありますが、よくわかりません。（正常に読み込まれる場合は、数回更新してバグを確認してください。）

どうすればこれをより完全にすることができますか？（JavaScriptが必要な場合は、それでも問題ありませんが、CSSが望ましいです。）

これは純粋なCSSで実行でき、メディアクエリも必要ありません。

画像を柔軟にするには、単純にmax-width:100%およびを追加しheight:autoます。画像max-width:100%とheight:autoIE7で動作しますが、IE8では動作しません（そう、別の奇妙なIEバグ）。これを修正するにはwidth:auto\9、IE8 を追加する必要があります。

ソース：http : //webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS：

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

また、画像の最大幅を固定したい場合は、次のようにコンテナ内に配置するだけです。

<div style="max-width:500px;">
    <img src="..." />
</div>

JSFiddleの例はこちら。JavaScriptは必要ありません。Chrome、Firefox、IEの最新バージョンで動作します（これは私がテストしたすべてです）。

2018以降のソリューション：

ビューポート相対単位を使用すると、猫の画像があるため、生活が楽になります。

ここで、アスペクト比を尊重しながら、コード内にこの猫を配置します。

img {
  width: 100%;
  height: auto;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

これまでのところあまり面白くありませんが、猫の幅をビューポートの最大50％に変更したい場合はどうでしょうか。

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

同じ画像ですが、最大幅が50vw vw（=ビューポートの幅）に制限されているため、指定された桁に応じて、画像はビューポートのX幅になります。これは高さでも機能します：

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

これにより、画像の高さがビューポートの最大20％に制限されます。

window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

IE onresizeでは、ピクセルの変更（幅または高さ）ごとにイベントが発生するため、パフォーマンスの問題が発生する可能性があります。JavaScriptのwindow.setTimeout（）を使用して、画像のサイズ変更を数ミリ秒遅らせます。

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

resizeプロパティをbothに設定します。次に、幅と高さを次のように変更できます。

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

jQueryを使用していますか？

私はすぐにjQueryプラグインを検索しましたが、それらにはこれを行うためのプラグインがあるようですので、これを確認してください：

http://plugins.jquery.com/project/jquery-afterresize

編集：

これはCSSソリューションです。私はstyle = "width：100％"を追加するだけで、少なくともchromeとSafariで機能します。私にはieがないので、そこでテストして、知らせてください。ここにコードがあります：

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

最初は、次のhtml / cssを使用していました。

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

<div> 
  <img src="..." />
</div>

それから私class="img"は<div> このように追加しました：

<div class="img">
  <img src="..." />
</div>

そして、すべてが正常に動作し始めました。

CSS3 scaleプロパティを使用して、cssで画像のサイズを変更できます。

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

さらに読む：

• CSS3 2D変換
• CSS3ホバー効果の遷移、変換、アニメーション

このコードを使用してください。ほとんどが忘れているのは、画像の最大幅として最大幅を指定することです

img {   
    height: auto;
    width: 100%;
    max-width: 300px;
}

このデモを確認して くださいhttp://shorturl.at/nBKVY

試す

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

表示ブロックとインラインブロックでのみ機能します。年齢を調べて調べただけなので、フレックスアイテムには影響しません。