CSS を使用して画像サイズを調整する方法のサンプルコード共有

通常、画像 の CSS プロパティを設定して高さと幅を定義できます。ただし、画像の最大表示サイズを制御したい場合もあります。このような操作には通常 2 つの方法があります: 1. CSS プロパティ値を直接使用する。 2. JavaScript を使用して CSS 値を動的に設定する。

1. 固定サイズ
一般に、画像のサイズを制限するには、次のHTML属性値またはCSS属性値を使用して定義します:

<img  src="/static/imghwm/default1.png"  data-src="http://www.linuxfly.org/logo.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" border="0" alt="CSS を使用して画像サイズを調整する方法のサンプルコード共有" >
img {
    width: 600px;
    height: 500px;
}

しかし、これは設定が厳格すぎて、柔軟性が不十分です。

2. CSS 属性値を使用します

img.qtipImg {
    max-width: 500px; 
    width: 500px;
    width:expression(this.width > 500 ? "500px" : this.width);
    overflow:hidden;
}

ここでは、CSS ルールを使用して qtipImg クラスの下に img タグを定義し、max-width 属性を通じて 500px の幅の範囲内で画像を制御します。比率に適応します。
ただし、さまざまなブラウザーによるこの属性のサポートには一貫性がありません。たとえば、IE6 はこの属性をサポートしていません。
したがって、演算子の後の括弧内のステートメントは、画像サイズを動的に調整するために使用される JavaScript スクリプトです。
最後のoverflow:hiddenは、上記2つの属性定義が無効になった場合に、設定したサイズを超えた部分が非表示にならないようにして、表示例外を回避するためのものです。
この設定はテストされており、IE7、IE8、および FireFox 3.5 で正常に動作します。

3. JavaScript スクリプトを使用する
各ブラウザ (異なるバージョンを含む) では、CSS のサポートが異なります。例: IE 8 では、式アクションのサポートがキャンセルされました。このとき、JavaScriptを使って画像サイズを調整するのも良い方法です。ただし、純粋な JavaScript スクリプトを使用すると、画像のダウンロード中にサイズがオーバーフローし、ダウンロードが完了するまで JavaScript がサイズを適切な値に調整しないという欠点があります。
1. 転送された Image オブジェクトを使用します
2 つの JavaScript 関数:

function getImageSize(FilePath) {   
  var imgSize={width:0,height:0};   
  image=new Image();   
  image.src=FilePath;   
  imgSize.width = image.width;   
  imgSize.height = image.height;   
  return imgSize;   
}
function fixImageSize(originalImage) {
  fixSize = 500;
  if ( originalImage.width > fixSize ) {
    originalImage.height = Math.round( originalImage.height * fixSize / originalImage.width );
    originalImage.width = fixSize;
  }
  return originalImage;
}

使用する場合、これらの 2 つの関数に画像のアドレスを渡し、戻り値は調整された画像です:

img = getImageSize("http://www.linuxfly.org/logo.gif");
img = fixImageSize(img);
finalresult = &#39;<img src="/static/imghwm/default1.png"  data-src="&#39;+attachUrl+&#39;"  class="lazy"      style="max-width:90%" height="&#39;+img.height+&#39;" alt="&#39;+filename+&#39;"/>&#39;;

2 . DOMを読み込んだ後にサイズを調整します
CSS表現方法はキャンセルされますが、JavaScriptを直接使用して適切なCSS値を計算することは依然として良い方法です。たとえば、jQuery の $(document).ready() メソッドを使用すると、画像の読み込み時のオーバーフローの問題を回避できます。
次のスクリプトの出典: ここ

$(document).ready(function() {
    $('.post img').each(function() {
    var maxWidth = 100; // 图片最大宽度
    var maxHeight = 100;    // 图片最大高度
    var ratio = 0;  // 缩放比例
    var width = $(this).width();    // 图片实际宽度
    var height = $(this).height();  // 图片实际高度

    // 检查图片是否超宽
    if(width > maxWidth){
        ratio = maxWidth / width;   // 计算缩放比例
        $(this).css("width", maxWidth); // 设定实际显示宽度
        height = height * ratio;    // 计算等比例缩放后的高度 
        $(this).css("height", height * ratio);  // 设定等比例缩放后的高度
    }

    // 检查图片是否超高
    if(height > maxHeight){
        ratio = maxHeight / height; // 计算缩放比例
        $(this).css("height", maxHeight);   // 设定实际显示高度
        width = width * ratio;    // 计算等比例缩放后的高度
        $(this).css("width", width * ratio);    // 设定等比例缩放后的高度
    }
  });
});

以上がCSS を使用して画像サイズを調整する方法のサンプルコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。