ホームページ >バックエンド開発 >PHPチュートリアル >JavaScript - 淘宝網または JD.com では、画像リストで画像の元のサイズが同じになります。これを実現するにはどうすればよいですか?

JavaScript - 淘宝網または JD.com では、画像リストで画像の元のサイズが同じになります。これを実現するにはどうすればよいですか?

WBOY
WBOYオリジナル
2016-10-11 14:23:391232ブラウズ

最近商品一覧ページを作成しましたが、フロントエンドCSSで画像の幅と高さを制御していましたが、オンライン化後、画像のサイズ比率が問題であることがわかりました。バックグラウンドでアップロードされた画像は、自分の CSS で制御されている画像サイズの比率と異なっていました。
そこで、淘宝網、JD.comなどの電子商取引ウェブサイトを調べたところ、画像サイズはすべて同じサイズまたは比率であることがわかりましたJavaScript - 淘宝網または JD.com では、画像リストで画像の元のサイズが同じになります。これを実現するにはどうすればよいですか?

JavaScript - 淘宝網または JD.com では、画像リストで画像の元のサイズが同じになります。これを実現するにはどうすればよいですか?
これは統一仕様に従ってバックグラウンドで画像をアップロードしているのでしょうか、それともバックグラウンドで画像をサイズ制限せずにアップロードし、任意にアップロードしてコードで処理しているのでしょうか?

返信内容:

最近商品一覧ページを作成しましたが、フロントエンドCSSで画像の幅と高さを制御していましたが、オンライン化後、画像のサイズ比率が問題であることがわかりました。バックグラウンドでアップロードされた画像は、自分の CSS で制御されている画像サイズの比率と異なっていました。
そこで、淘宝網、JD.comなどの電子商取引ウェブサイトを調べたところ、画像サイズはすべて同じサイズまたは比率であることがわかりましたJavaScript - 淘宝網または JD.com では、画像リストで画像の元のサイズが同じになります。これを実現するにはどうすればよいですか?

JavaScript - 淘宝網または JD.com では、画像リストで画像の元のサイズが同じになります。これを実現するにはどうすればよいですか?
これは統一仕様に従ってバックグラウンドで画像をアップロードしているのでしょうか、それともバックグラウンドで画像をサイズ制限せずにアップロードし、任意にアップロードしてコードで処理しているのでしょうか?

商品をアップロードする際は、高解像度のオリジナル画像をアップロードするだけでよく、サーバーは圧縮技術によってこの問題を解決します。

  1. サーバーは、異なるサイズの複数の写真セットを保存します

  2. imgタグをリクエストするときにアドレスに識別子を追加すると、サーバーはリアルタイムで画像を圧縮します

これら 2 つの方法は両方とも実装できます。後者の場合、複数のリクエストが複数回圧縮されます。最初の方法は、ハードディスクの消費量を増やすことです。 2 つのオプション 2 には特徴があり、実際の状況に応じて選択できます。
キャッシュなどの一部の最適化方法は後で追加できます。

リーリー

上記のラベルは、JD.com のホームページの製品画像のアドレス バーにある画像サイズ アイコンです。 s130x130

バックグラウンドでアップロードされ、淘宝網もバックグラウンドでアップロードされます

これはプログラムに依存して完全に処理することはできず、対応する要件をオペレーターに提示する必要があります。

すべての問題をプログラムに依存して処理しようとすることは、完全に電源が切れたコンピューターに独自の電源を見つけて起動させようとするのと同じです。

まず、淘宝網の背景画像のアップロードプロセスを試す必要があります。淘宝網画像のアップロードでは、すべての画像をトリミングして圧縮することができます。また、画像は自動的に淘宝網のプロポーショナル形式に変換されます。 。

あなたの質問に対して、より良い画像アップロードプラグインを見つけて、画像をアップロードする際の比率を制御し、ソースで画質を制御することをお勧めします。

同時に、アップロード操作のプロセスとヒントを最適化します。目立つプロンプトを使用して、ユーザーにいくつかの要件を知らせます。

無料の画像アップロードおよびトリミング プラグインをお勧めします: http://www.w3cschool.cn/jquer...

これに似たアップロード プラグインの方が適しています。もちろん、バッチでアップロードする場合は、バッチ インターセプトを実装する画像インターセプト スクリプトを見つけることができます。
ただし、個人的には、電子商取引に近い画像の場合は、PSなどのツールの画像処理段階でサイズ比率を扱う方が適しているのではないかと提案しています。あなたのウェブサイトの画像比率の要件を私たちに送ってください。また、画像の比率をタオバオなどの大きなプラットフォームの比率にできるだけ近づけることをお勧めします。これにより、顧客の素材画像の再利用が容易になり、ユーザーエクスペリエンスが向上します。 。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。