家 › 電話 › CSS: 領域に画像を挿入します。 Canvas を使用して画像をフォーマットする HTML で画像をトリミングする方法

CSS: 領域に画像を挿入します。 Canvas を使用して画像をフォーマットする HTML で画像をトリミングする方法

場合によっては、ブロックの内容が要素の境界の外側に表示され、要素と重なって表示されます。ブロックレベルの要素の動作を制御するには、ブロックの外側に広がるコンテンツをどのように表示するかを決定する overflow プロパティを使用します。

クリッププロパティを使用すると、要素を指定した寸法にトリミングできます。

1. オーバーフロープロパティ

ブロックに明示的な高さおよび/または幅がある場合、ブロック要素のコンテンツがブロックからオーバーフローする可能性があります。高さを指定しない場合、ブロックがposition:Absolute;に配置されていない限り、ブロックはコンテンツに合わせて引き伸ばされます。または位置: 固定。。テキストは高さ、画像は高さと幅がブロックからはみ出す可能性があります。


値:
見える	デフォルト値。コンテナブロックのサイズに関係なく、すべてのコンテンツが表示されます。隣接するブロックの内容を重ねることが可能です。
スクロール	要素の表示領域内にスクロールバーを追加します。コンテンツがブロック内に収まる場合でも表示されます。コンテナの寸法は変わりません。
自動	必要な場合にのみスクロールバーを追加します。
隠れた	ブロックの境界を越えるコンテンツを非表示にします。一部のコンテンツが非表示になる可能性があります。フローティング要素を含むコンテナブロックに使用されます。また、フローティング要素 (float: left / right; プロパティが設定されている要素) の下に背景や境界線が表示されないようにすることもできます。これにより、コンテナーのサイズが変更されることはありません。

米。 1. オーバーフロープロパティを使用してブロックコンテンツをトリミングします。構文: div ( width: 200px; height: 150px; overflow: hidden; )

2. Overflow-x プロパティ

このプロパティは、ブロック内のコンテンツがオーバーフローした場合に、その右端をどのように切り取るかを指定します。

構文：

Div (オーバーフロー-x: 非表示; )

3. オーバーフロー性プロパティ

このプロパティは、ブロック内のコンテンツがオーバーフローした場合に、その下端をどのようにトリミングするかを指定します。

構文：

Div (オーバーフロー-y: 非表示; )

4. クリッププロパティ

プロパティによって、要素のどの部分が表示されるかが決まります。トリミング後に表示されたままになる要素の部分は、クリッピング領域と呼ばれます。クリッピングは、最初は完全に表示されている要素に適用されます。このプロパティは、position プロパティが [absolute] または [fixed] に設定されている要素に適用されます。

この記事では、HTML5 の要素を使用して画像のサイズ変更と切り抜きを行う方法を学びます。その際に、コントロールにフォトエディターのようなスタイリッシュなデザインを与えてみましょう。

現在、多くのWebサイトやWebアプリケーションに画像処理技術が搭載されています。これはサーバー側で実行できますが、潜在的に大きな画像を転送するための時間コストが発生します。これを回避するには、クライアントマシンで画像を処理してプロセスを高速化します。

これをキャンバスを通じて行い、希望のサイズで画像を描画し、新しい画像を取得します。多くのブラウザーがこの方法をサポートしているため、パフォーマンス上の制限はわずかですが、すぐに開始できます。

大きな画像をフォーマットすると、ブラウザの速度が低下したり、ブラウザが完全に停止したりする可能性があります。そこで、アップロードする画像に制限を設けることを考えさせられます。結果として得られる画像の品質が重要である場合、ブラウザーが画像をどのように変換するかに驚くかもしれません。画像処理の品質を向上させるためのテクノロジがインターネット上でいくつか見つかりますが、ここでは取り上げません。

そのために、私たちは仕事を始めます！

マーキング

私たちのデモでは、指定された 1 つの画像を操作します。

全て！他の HTML は必要ありません。

CSS

CSS コードもそれほど大きくなりません。サイズ変更コンテナと画像自体のスタイルを定義しましょう。

Resize-container ( 位置: 相対; 表示: インラインブロック; カーソル: 移動; マージン: 0 自動; ) .resize-container img ( 表示: ブロック ) .resize-container:hover img, .resize-container:active img (アウトライン: 2px 破線 rgba(222,60,80,.9 )

次に、各「サイズ変更ハンドル」の位置とスタイルを設定しましょう。これらは画像の隅にある小さな四角形で、画像のサイズを変更するためにドラッグします。

サイズ変更ハンドル、 .resize ハンドル、 .resize ハンドル、 .resize ハンドル nw、 .resize ハンドル sw ( 位置: 絶対; 表示: ブロック; 幅: 10px; 高さ: 10px;背景: rgba(222,60,80,.9); z-index: 999; .resize-handle-nw (上: -5px; 左: -5px; カーソル: nw-resize; ) ( 下: -5px; 左: -5px; カーソル: sw-resize; ) .resize-handle-ne ( 上: -5px; 右: -5px; カーソル: ne-resize; ) .resize-handle-se ( 下: -5px; 右: -5px; カーソル: サイズ変更)

JavaScript

まず、Canvas で変数とキャンバスを作成しましょう。

VarsizeableImage = function(image_target) ( var $container, orig_src = new Image(), image_target = $(image_target).get(0),event_state = (), constrain = false, min_width = 60, min_height = 60, max_width = 800、max_height = 900、resize_canvas = document.createElement("canvas" )); sizeableImage($(".resize-image"));

次に、すぐに実行されるトリガー関数を作成しましょう。この関数は、画像が入っているコンテナと連携してサイズを設定し、トリミングのために元の画像をコピーします。また、後で参照できるように、またマウス移動演算子を使用してマウスのドラッグに応答できるように、jQuery オブジェクトを割り当てます。

VarsizeableImage = function(image_target) ( // ... init = function())( // 元の src のコピーを使用して新しいイメージを作成します // サイズ変更するときは、常にこの元のコピーをベースの orig_src として使用します。 src =image_target.src; // サイズ変更ハンドルを追加 $(image_target).wrap("

"）。前に（" "）。前に（" "）。後（" "）。後（" "); // コンテナの変数を取得 $container = $(image_target).parent(".resize-container"); // イベントを追加 $container.on("mousedown", ".resize-handle", startResize) ）; //... 初期化（）;

startResize 関数と endResize 関数は、マウスの動きに注意を払い始めるタイミングと停止するタイミングをブラウザに指示します。

StartResize = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", サイズ変更); $(document).on("mouseup", endResize ); endResize = function(e)( e.preventDefault(); $(document).off("mouseup touchend", endResize); $(document).off("mousemove touchmove", resizing); );

マウスの追跡を開始する前に、ページをリクエストするときに現在のクライアント設定をスキャンする必要があります。それらをevent_state変数に保存し、後の作業で使用します。

SaveEventState = function(e)( // 初期イベントの詳細とコンテナの状態を保存します。event_state.container_width = $container.width();event_state.container_height = $container.height();event_state.container_left = $container.offset()。 left;event_state.container_top = $container.offset().top;event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches.clientX) + $(window).scrollLeft(); (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // これはモバイル safari 用の修正です // 何らかの理由で直接コピーできませんtouchs プロパティの if(typeof e.originalEvent.touches !== "unknown")(event_state.touches = ; $.each(e.originalEvent.touches, function(i, ob)(event_state.touches[i] = ( ); イベント_状態.タッチ[i].クライアントX = 0+ob.クライアントX; イベント_状態.タッチ[i].クライアントY = 0+ob.クライアントY );

最も重要なのはサイズ変更機能です。画像が引き伸ばされるときにアクティブになります。毎回、正方形の新しい位置に応じて新しい画像サイズが計算されます。

次に、Shift キーまたは変数を使用して画像のサイズを制限するオプションを追加します。

注記: 画像に単に新しい長さと高さを与えるのではなく、実際に画像のサイズを変更しているので、サーバーのパフォーマンスを制御するために、resizeImage 関数をどの程度使用できるかを検討する価値があります。

新しい画像サイズ

Canvas での画像の描画は、drawImage と同じくらい簡単です。画像の高さと長さを設定し、オリジナルを提供します。また、toDataURL を使用して、Base64 でエンコードされたバージョンの操作結果を取得します。

この操作で使用できるオプションの完全な説明が提供されます。

ResizeImage = function(幅, 高さ)(resize_canvas.width = 幅;size_canvas.height = 高さ;resize_canvas.getContext("2d").drawImage(orig_src, 0, 0, width, height); $(image_target).attr( "src"、resize_canvas.toDataURL("image/png") );

簡単すぎる？注意点が 1 つあります。画像はページと同じドメイン、または . そうでない場合は、「汚染されたキャンバス」の問題が発生します。

他の頂点を経由して増加

これで、動作するデモが完成したはずです。しかし、まだ終わっていません。現時点では、イメージを 1 つの角にのみ拡張できますが、4 つすべてを使用したいと考えています。これを行うには、その仕組みを理解する必要があります。

画像を引き伸ばすときは、保持した角に隣接する角も移動する必要がありますが、画像の反対側の端は固定する必要があります。

画像を任意の角度に引き伸ばしたときに画像が変化するようにコードを変更できます。サイズ変更関数を更新しましょう。

サイズ変更 = function(e)( var Mouse=(),width,height,left,top,offset=$container.offset(); Mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft(); Mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop();ドラッグされた角と制約に応じて異なります if($(event_state.evnt.target).hasClass("resize-handle-se"))( width =mouse.x -event_state.container_left; height =mouse.y -event_state.container_top ; 左 = イベント状態.コンテナ左; トップ = イベント状態.コンテナトップ ) else if($(event_state.evnt.target).hasClass("resize-handle-sw"))( width =event_state.container_width - (mouse.x -event_state) .container_left); 高さ = マウス.y - イベント状態.コンテナートップ; 左 = マウス状態.コンテナートップ; else if($(event_state.evnt.target).hasClass("resize-handle-nw")幅 = イベント状態.コンテナ幅 - (mouse.x - イベント状態.コンテナ左); 高さ = イベント状態.コンテナ高さ - (マウス.y - イベント状態.コンテナ_トップ); 左 = マウス.x; トップ = マウス.y; if(constrain || e.shiftKey)( top =mouse.y - ((width / orig_src.width * orig_src.height) - height); ) ) else if($(event_state.evnt.target).hasClass("resize -handle-ne"))(幅 = マウス.x - イベント状態.コンテナ左; 高さ = イベント状態.コンテナ高さ - (マウス.y - イベント状態.コンテナトップ); 左 = イベント状態.コンテナ左; トップ = マウス.y; if(制約 | | e.shiftKey)( top =mouse.y - ((width / orig_src.width * orig_src.height) - height); ) ) // 必要に応じてアスペクト比を維持します if(constrain || e.shiftKey)( height = width / orig_src.width * orig_src.height ) if(幅 > 最小幅 && 高さ > 最小高さ && 幅< max_width && height < max_height){ // To improve performance you might limit how often resizeImage() is called resizeImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({"left": left, "top": top}); } }

次に、どのサイズ変更ハンドルが使用されたかを確認し、必要な変更を適用します。

画像の移動

画像のサイズを変更できるようになりましたが、画像が時々「はみ出す」ことに気づいたかもしれません。オブジェクトをフレームの中心に移動する機能を追加する必要があります。初期化関数を少し拡張してみましょう。

Init = function())( //... $container.on("mousedown", "img", startMoving); )

ここで、startResize と endResize と同様の関数 startMoving と endMoving を追加します。

StartMoving = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", move); $(document).on("mouseup", endMoving ); endMoving = function(e)( e.preventDefault(); $(document).off("mouseup", endMoving); $(document).off("mousemove", Moving); );

移動関数では、左上の正方形の位置を計算する必要があります。これは、他の正方形の動きから計算された小さなオフセットを備えた最初の値と等しくなる必要があります。

移動 = function(e)( var Mouse=(); e.preventDefault(); e.stopPropagation(); Mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); マウス.y = (e.clientY || e.pageY) + $(window).scrollTop(); $container.offset(( "left":mouse.x - (event_state.mouse_x -event_state.container_left), "top" :mouse.y - (event_state.mouse_y -event_state.container_top) ));

画像のトリミング

サイズ変更方法を学習したので、画像のトリミングを追加する必要があります。ユーザーが切り抜きサイズで苦労するのではなく、適切な場所に配置する必要があるフレームを作成するだけで、その周りのすべてが切り取られます。これにより、画像を自由に調整できると同時に、結果として得られる画像のサイズを均一にすることができます。

これを行うには、次の HTML コードを追加する必要があります。

フレームは常にページの背景とは異なる色でなければならないことに注意してください。そうしないと問題が発生する可能性があります。

オーバーレイ (位置: 絶対; 左: 50%; 上: 50%; マージン左: -100px; マージン上: -100px; z-index: 999; 幅: 200px; 高さ: 200px; ボーダー: ソリッド 2px rgba( 222,60,80,.9); ボックスサイズ: コンテンツボックス; ポインターイベント: なし; .overlay:after、.overlay:before (コンテンツ: ""; 表示: ブロック; 幅: 204px ; 高さ: 40px; 境界線左: 破線 2px rgba(222,60,80,.9); margin-top: -40px ) .overlay:after (bottom: 0; margin-left: -2px; margin-bottom: -40px; ) .overlay-inner:after, .overlay -inner:before ( content: "";位置: 絶対; 表示: ブロック; 幅: 40px; 高さ: 2px rgba(222,60,80,.9); ); .overlay-inner:before ( left: 0; margin-left: -40px; margin-top: -2px; ) .overlay-inner:after ( right: 0; margin-right: -40px; margin-top: -2px) .btn-crop (位置: 絶対; 垂直方向の配置: 下; 右: 5px; 下: 5px; パディング: 6px 10px; z インデックス: 999; 背景色: rgb(222,60,80); 境界線: なし。境界半径: 5px; 色: #FFF; )

JavaScript コードも更新しましょう。

Init = function())( //... $(".js-crop").on("click", Crop); ); Crop = function())( var Crop_canvas、left = $(".overlay").offset().left - $container.offset().left、top = $(".overlay").offset().top - $container.offset().top、幅 = $(".overlay").width()、高さ = $(".overlay").height(); = 幅; クロップ_キャンバス.高さ = 高さ; クロップ_キャンバス.getContext("2d").drawImage(画像ターゲット, 左, 上, 幅, 高さ, 0, 0, 幅, 高さ); png")); )

Crop 関数は、resizeImage と似ています。唯一の違いは、フレームの位置から寸法とトリミング位置を取得することです。

トリミングするには、キャンバス内のdrawImageオペレータに9つのパラメータを設定する必要があります。 1枚目が元画像です。次の 4 つは操作に使用される場所です。残りの 4 つは、キャンバス内で描画を開始する場所の座標と、画像のサイズです。

タッチおよびジェスチャ認識の追加

マウスのサポートを作成しました。モバイルデバイスも無視しないようにしましょう。

Mousedown と Mouseup には同等の演算子 touchstart と touchend があり、mousemove には touchmove があります。タッチアップとタッチダウンと混同しないように注意する必要があります（混同しないとおかしなことになります）。

Mousedown があるところには touchstart と touchend を追加し、mousemove があるところには touchmove とともに Mouseup を追加しましょう。

// init() 内... $container.on("mousedown touchstart", ".resize-handle", startResize); $container.on("マウスダウンタッチスタート", "img", startMoving); // startResize() 内 ... $(document).on("mousemove touchmove", move); $(document).on("マウスアップタッチエンド", endMoving); //endResize() 内... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", 移動); //startMoving() 内... $(document).on("mousemove touchmove", move); $(document).on("マウスアップタッチエンド", endMoving); //endMoving() 内... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", 移動);

モバイルデバイスを接続しているため、ユーザーは画像を指で「絞る」ジェスチャーを使用して画像を小さくする可能性があります。 Hammer という非常に便利なライブラリがあり、これを使用するとさまざまなジェスチャを認識できます。ただし、必要なのは 1 つだけなので、追加のスクリプトは使用せずに簡単に書きます。

saveEventState 関数がすでにタッチ情報に保存されていることに気づいたかもしれません。今度はそれが必要になります。

まず、「2 つのタッチ」の有無とそれらの間の距離を確認します。また、移動するにつれてそれらの間の距離が縮まるかどうかも調べます。次に、移動を更新しましょう。

Moving = function(e)( var Mouse=(), Touchs; e.preventDefault(); e.stopPropagation(); Touchs = e.originalEvent.touches; Mouse.x = (e.clientX || e.pageX || touchs.clientX) + $(window).scrollLeft(); Mouse.y = (e.clientY || e.pageY || touchs.clientY) + $(window).scrollTop(( " left":mouse.x - (event_state.mouse_x -event_state.container_left), "top":mouse.y - (event_state.mouse_y -event_state.container_top) )); // 移動中のピンチズームジェスチャに注意してください if(event_state. touchs && events_state.touches.length > 1 && touchs.length > 1)( var width =event_state.container_width, height =event_state.container_height; var a =event_state.touches.clientX -event_state.touches.clientX; a = a * a ; var b = イベント_state.touches.clientY; var dist1 = Math.sqrt(a + b); b = e.originalEvent.touches.clientY; b; var dist2 = Math.sqrt(a + b); var 比 = dist2 /dist1; 幅 = 幅 * 比率; 高さ = 高さ * 比率; // パフォーマンスを向上させるために、resizeImage() が呼び出される頻度を制限することもできますresizeImage(width, height); ) );

このデータに基づいて、画像を縮小または拡大し、高さと長さを調整します。

それだけです。開けることができます

この記事では、についてお伝えします 3 つの素早く簡単な CSS テクニックを使用すると、ページ上の画像の一部のみを表示できます。

ここで使用されているすべてのメソッドは、実際には数行しか必要としません。 CSSコード。しかし、これは本当の意味での割礼ではありません（ CSSこれはまだできません)、画像の見たい部分だけを非表示にしたり、表示したりするだけです。

これらのテクニックは、画像を特定のサイズにしたい場合、つまり、ニュースセクションなどで画像のプレビュー (画像の小さいコピー) を作成する場合などに非常に役立ちます。

テクニック 1 - 負のマージンを使用する ( 負のマージン)

マイナスのマージンを使用したくない場合は、次のテクニックを使用することをお勧めします。 №2 。これには、特定の幅と高さを持つ親 (段落) が含まれます。この段落には次のプロパティがあります 位置決め相対に設定します。幅と高さは、表示されるフィールドの寸法を定義します。そして、段落内に配置された画像には次のプロパティがあります 位置決め絶対に設定します。次に、プロパティを使用できます上そして左画像のどの部分を表示し、どの部分を表示しないかを決定する過程で、画像を自由に配置します。

HTML前の手法のコードと同じです。

< p class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "" / > < / a > < / p >

作物（

フロート: 左;

マージン: 。 5em 10px 。 5em 0 ;

オーバーフロー: 非表示; /* これは重要 */

位置: 相対的; /* これも重要です */

境界線: 1px 実線 #ccc;

幅: 200ピクセル;

高さ: 120ピクセル;

画像のトリミング (

位置: 絶対;

トップ: - 40ピクセル;

左: - 50ピクセル;

テクニック 3 - スライスプロパティの使用 ( クリップのプロパティ)

このテクニックは最も簡単なはずです。 クリッププロパティ表示する要素の部分を定義します。これは完璧な解決策のように思えますが、 1つのキャッチ: クリップされた要素絶対に配置する必要があります。要素を使用できるようにするには、要素を追加し、画像の表示領域のサイズを計算し、このサイズを親に追加し、親を使用する必要があります...多くの作業が必要です。右？

ああ、もう 1 つ問題があります。切り抜かれた要素のサイズは切り抜きサイズまで縮小されず、元のサイズのままです (切り抜きの外側の画像は単に非表示になります)。表示領域を親の左上隅に移動するには、絶対配置を使用する必要があります。

ただし、言及しないわけにはいかない スライス特性。そしてまたコードが…

< div class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "CSSテンプレート" / > < / a > < / div >

説明

Clip プロパティは、コンテンツが表示される位置決めされた要素の領域を指定します。この領域に収まらないものは切り取られて非表示になります。現時点では、使用可能な領域の形状は長方形のみです。それ以外のものはすべて夢の中にだけ残ります。クリップは絶対に配置された要素に対してのみ機能します。

構文

クリップ：rect(Y1, X1, Y2, X2) | 自動 | 継承する

価値観

使用される値は、要素の端からクリッピング領域までの距離で、CSS 単位 (ピクセル (px)、em など) で設定されます。領域の端を変更しない必要がある場合は、次のように設定します。 auto の場合、残りの値の位置は図に示されています。 1.

米。 1. クリップのプロパティ値

HTML5 CSS2.1 IE Cr Op Sa Fx

クリップ

Lorem ipsum dolor sit amet、consectetuer adipiscing elit、sed diem nonummmy nibh euismod Tincidunt ut lacreet dolore magna aliguamerat volutpat。あなたの行動を最小限にとどめて、ロボルティス・ニスを疑うウラムコーパーの任務を遂行し、結果を得ることができます。

この例の結果を図に示します。 2.

米。 2. Safariブラウザでクリップを使用する

オブジェクトモデル

document.getElementById("要素ID ").style.clip

ブラウザ

バージョン 7.0 までの Internet Explorer は、座標値がカンマではなくスペースで区切られる、異なる形式の表記法 (clip:rect(40px auto auto 40px)) で動作します。また、バージョン 7.0 までの Internet Explorer は、値の継承をサポートしていません。

画像はインターネットページの魅力を大幅に向上させ、最終的にはコンバージョンにプラスの効果をもたらします。したがって、ウェブマスターはコンテンツ内だけでなく、投稿のお知らせを公開するときにもこれらを使用します。結局のところ、画像付きのリンクをたどるほうが、単純なリンクをたどるよりもはるかに頻繁に発生します。

以前、WordPress で投稿を公開するときに、同じ画像のサイズの異なる複数のバージョンを用意しました。大きいもの（オリジナルサイズ）はギャラリーでの表示に使用され、中のものは投稿自体の本文に使用され、小さいものはサムネイルとして使用されます。

時間が経つにつれて、時間のコストと、手動変換中に「いいえ、いいえ、はい」というエラーが発生するため、この作業に飽きてきました。また、サイトのデザインを変更する際に、画像のサイズを変える必要が生じて大変でした。そこで、Kama Thumbnail WordPress プラグインを使用して、その場で画像を変換し始めました。この素晴らしいプラグインの作者に感謝します!

同じ記事では、無関係な PHP や JavaScript コードを使用せずに、「裸の」CSS のみを使用して、画面に表示される画像のサイズを変更する方法を説明します。将来的には、画像のアスペクト比が異なる多数の小さなファイルが作成されないのと同じように、元の画像自体は変更されず、すべてのアクションはサイト訪問者の画面に表示されるものにのみ影響を与えると言えます。そう、それは、赤いレンズの眼鏡をかけるようなもので、見えているものにもかかわらず、空は依然として青く、草は緑のままです。

CSS プロパティオブジェクトフィット

このプロパティにより決定されます。 どうやってコンテナの高さと幅がサイズ変更可能な要素自体の寸法と異なる場合、サイズ変更可能な要素 (画像など) のコンテンツはコンテナを満たす必要があります。ここでのキーワードは、 どうやって.

ここですべてを説明する最も簡単な方法は、例を使用することです。 200x300 ピクセルと 300x200 ピクセルの 2 つの画像があり、投稿サムネイルには 200x200 ピクセルの画像を使用したいとします。主画像はプロポーションを保ったままミニチュア内に完全に埋め込まれ、余分な部分（上下または左右）が切り取られるのが合理的です。

計画を実装するには、キー値を使用する必要があります オブジェクトフィット: カバー;, これを使用すると、画像の余分なコンテンツがトリミングされ、最終的な画像がコンテナ領域を完全に埋めるように比率を維持したまま中央に配置されます。

CSSを使用して画像を圧縮およびトリミングする方法

私の場合、サイズやアスペクト比が異なる画像を 200x200 ピクセルのサムネイル形式に変換するには、次の CSS コードを使用する必要があります。

Img.object-fit-cover (幅: 200px; 高さ: 200px; object-fit: cover; )

画像出力自体は次のようになります。

画像変換のためのその他のオブジェクトフィット値

object-fit CSS プロパティは上記の例に限定されるものではありません。この記事の下部にある使用されているソースのリストですべての機能を理解しておくことをお勧めします。

CSSのみを使用して画像サイズを変換するメリットとデメリット

利点は、プラグイン、コード、追加の画像が必要ないことです。提案された変換オプションは CMS に依存せず、ほとんどのブラウザーで機能します。生成される画像のサイズは 1 ページ内であっても動的に変更できるため、画像ファイルの数やサイトが占有するスペースの増加にはつながりません。

欠点には、すべての変換がユーザー側のブラウザーによって実行されるという事実が含まれます。ここで、理論上は、インターネットブラウザエンジンとサイト訪問者のオペレーティングシステムに応じて、わずかに異なる結果が得られる可能性があります。

さらに、100x100 ピクセルのミニチュアに FullHD 1920x1080 形式の画像を使用する場合、画像は最初にユーザーのコンピュータに完全にダウンロードされ、その後ブラウザによって 100x100 形式に変換されます。ご存知のとおり、このような画像 (1920x1080 と 100x100) のサイズは 10 倍も異なる可能性があり、これにより、処理能力の低いコンピューターや遅いインターネット (たとえば、2G/3G ネットワーク上の携帯電話やタブレット) ではサイトの速度が低下する可能性があります。

私の意見では、メリットがデメリットを上回ります。