web-dev-qa-db-ja.com

ブラウザの幅/高さが変わると、CSSで画像のサイズを動的に変更できますか？

ブラウザウィンドウに合わせて画像のサイズを変更するにはどうすればよいのか、 here がこれまでに行ったことです（または Zipのサイト全体 ）。

これはFirefoxでは問題なく動作しますが、Chromeでは問題があります。画像のサイズが常に変更されるわけではなく、ページがロードされたときのウィンドウのサイズに何らかの形で依存します。

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

これをどのように防弾にすることができますか？ （JavaScriptが必要な場合、私もそれと一緒に暮らすことができますが、CSSが望ましいです。）

cssimagebrowserresizewindow
87
depi

このは純粋なCSSで実行でき、メディアクエリさえ必要としません。

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

ソース： 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の最新バージョンで動作します（これはすべてテスト済みです）。

166
Kurt Schindler
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

12
Shahid

2018年のソリューション：

ビューポート相対ユニットを使用すると、猫のイメージがあるため、生活が楽になります。

cat

アスペクト比を尊重しながら、コード内にこの猫が必要になりました。

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％に制限されます。

11
Roberrrt

サイズ変更プロパティを両方に設定します。その後、次のように幅と高さを変更できます。

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

JQueryを使用していますか？

JQueryプラグインをすばやく検索し、これを行うためのプラグインがあるように見えるため、このプラグインを確認してください。

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

編集：

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

            <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>
5
Arthur Neves

最初は、次の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>

そして、すべてがうまくいき始めました。

3
Rin

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;
}

さらに読む：

3
ShahRokh