自分の Web サイトで記事を更新するときによくある問題は、記事のイラストの幅が広すぎて、Web ページ全体が歪んでしまうことです。イラストを一枚ずつ拡大縮小してから挿入するのは面倒です。
以前書いた記事でこのようなことに遭遇し、その後、CSS のオーバーフローと max-width プロパティを使用して、ページの変形の問題を一時的に解決しました。この方法の利点はシンプルなことですが、欠点は一部のディテールの効果が損なわれてしまうことです。
たとえば、overflow:hidden は、内部要素の幅が親フレームよりも大きい場合に、超過した幅が非表示になることを意味します。そうすると、一部のコンテンツが突然切り取られ、非表示になる可能性があり、視聴者にとっては残念です。
max-width 属性によって記事イラストの最大幅を制限する場合は、各ブラウザの互換性を考慮する必要があります。私の印象では、IE6 はこの属性をサポートしていませんが、画像は比例して拡大縮小されません (Safari と Opera だったような気がします。はっきりとは覚えていません)。これが行われると有害になります。これらのブラウザのユーザーにとっては非常に不公平です。
そこで最終的に選んだのがJavaScriptで画像サイズを動的に変更する方法でした。この方法は様々なブラウザとの互換性が高く（今時JavaScriptを無効にする人は少ないですよね？）、テーマを変更すれば記事イラストの最大サイズも柔軟に変更できます。
私が使用しているテーマには jQuery ライブラリがロードされているため、次のコードで実装できます。
引用した内容は以下の通りです。
$ (ドキュメント) .ready ( function ( ) {
$ ( '.post img' ) . each ( function ( ) {
var maxWidth = 100 //画像の最大幅
var maxHeight = 100 ; // 画像の最大高さ
var比率= 0 ; // スケーリング比率
var width = $ ( this ) . width ( ) ; // 画像の実際の幅
var height = $ ( this ) . height ( ) //画像の実際の高さ
// 画像が超ワイドかどうかを確認します
if (幅> maxWidth ) {
rate = maxWidth / width ; // スケーリング率を計算します。
$ ( this ) . css ( "width" , maxWidth ) // 実際の表示幅を設定します。
height =高さ*比率// 等倍後の高さを計算します。
$ ( this ) .css ( "height" , height * ratio ) //比例拡大縮小後の高さを設定します。
}
// 画像が非常に高いかどうかを確認します
if (高さ> maxHeight ) {
rate = maxHeight /高さ; // スケーリング率を計算します。
$ ( this ) . css ( "height" , maxHeight ) //実際の表示の高さを設定します。
width = width * rate ; // 等倍後の高さを計算します。
$ ( this ) .css ( "width" , width * ratio ) //比例拡大縮小後の高さを設定します。
}
} ) ;
} ) ; |
jQuery ライブラリをロードしたくない場合は、次のコードを使用できます。
引用した内容は以下の通りです。
関数ResizeImage (画像、イラストの最大幅、イラストの最大高さ)
{
if ( image.className == "サムネイル" )
{
w =画像.幅;
h =画像の高さ;
if ( w == 0 || h == 0 )
{
image.width =最大幅;
画像の高さ=最大高さ;
}
else if ( w > h )
{
if ( w > maxwidth ) image.width = maxwidth ;
}
それ以外
{
if ( h > maxheight )画像の高さ= maxheight ;
}
image.className = "ScaledThumbnail" ;
}
} |
純粋な JavaScript を使用する場合は、画像に class="Thumbnail" を手動で追加する必要があるため、少し面倒ですが、最終的な効果は同じです。
原文: 画像サイズを動的に調整する
ボロさんの貢献に感謝します
