JavaScript で画像サイズを動的に調整する実装 code_image 特殊効果

以前に書いた記事でこのようなことに遭遇し、その後、CSS のオーバーフローと max-width プロパティを使用して、ページの変形の問題を一時的に解決しました。この方法の利点はシンプルなことですが、欠点は一部のディテールの効果が損なわれてしまうことです。

overflow: hidden など。これは、内部要素の幅が親フレームよりも大きい場合に、超過した幅が非表示になることを意味します。そうすると、一部のコンテンツが突然切り取られ、非表示になる可能性があり、視聴者にとっては残念です。

max-width 属性によって記事イラストの最大幅を制限する場合は、各ブラウザの互換性を考慮する必要があります。私の印象では、IE6 はこの属性をサポートしていませんが、画像は比例して拡大縮小されません (Safari と Opera だったような気がします。はっきりとは覚えていません)。これが行われると有害になります。これらのブラウザのユーザーにとっては非常に不公平です。

そこで最終的に選んだのが、JavaScriptで画像サイズを動的に変更する方法でした。この方法は様々なブラウザとの互換性が高く（今時JavaScriptを無効にする人は少ないですよね？）、テーマを変更すれば記事イラストの最大サイズも柔軟に変更できます。

私が使用しているテーマには jQuery ライブラリがロードされているため、次のコードで実装できます。

コードをコピーします。 コードは次のとおりです。

$(document).ready(function() {
$('.post img').each(function) () {
var maxWidth = 100; // 最大画像幅
var maxHeight = 100 // 最大画像高さ
var rate = 0; // スケーリング率
var width = $(this ).width(); // 画像の実際の幅
var height = $(this).height(); // 画像の実際の高さ
// 画像が超広いかどうかを確認します
if(width > maxWidth){
ratio = maxWidth / width; // スケーリング率を計算します
$(this).css("width", maxWidth) // 実際の表示幅を設定します
height = height * rate; // 均等スケーリング計算後の高さ
$(this).css("height", height * rate) // 比例スケーリング後の高さを設定します
}
// 画像が非常に高いかどうかを確認します
if( height > maxHeight){
ratio = maxHeight / height // スケーリング率を計算します
$(this).css("height", maxHeight; ); // 実際の表示高さを設定します
width = width * rate // 均等スケーリング後の高さを計算します
$(this).css("width", width * rate); // 高さを設定します等倍スケーリング後
}
});

jQuery ライブラリをロードしたくない場合は、次のコードを使用できます。

コードをコピーします コードは次のとおりです:

function ResizeImage(画像、イラストの最大幅、最大高さ)図の)

{
if (image.className == "サムネイル")
{
w = image.width;
h = image.height; = 0 || h == 0 )
{
image.width = maxwidth;
}
else if (w > h)
{
if (w > maxwidth) image.width = maxwidth;
}
else
{
if (h > maxheight) image.height = maxheight; >image.className = "ScaledThumbnail";
}
}


純粋な JavaScript を使用する場合は、画像に class="Thumbnail" を手動で追加する必要があります。 , しかし、最終的な効果は同じです。