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

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

Oct 11, 2016 pm 02:23 PM
html5 java javascript node.js php

最近商品一覧ページを作成しましたが、フロントエンド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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PHPとPython:2つの一般的なプログラミング言語を比較します PHPとPython:2つの一般的なプログラミング言語を比較します Apr 14, 2025 am 12:13 AM

PHPとPythonにはそれぞれ独自の利点があり、プロジェクトの要件に従って選択します。 1.PHPは、特にWebサイトの迅速な開発とメンテナンスに適しています。 2。Pythonは、データサイエンス、機械学習、人工知能に適しており、簡潔な構文を備えており、初心者に適しています。

PHP:Web開発の重要な言語 PHP:Web開発の重要な言語 Apr 13, 2025 am 12:08 AM

PHPは、サーバー側で広く使用されているスクリプト言語で、特にWeb開発に適しています。 1.PHPは、HTMLを埋め込み、HTTP要求と応答を処理し、さまざまなデータベースをサポートできます。 2.PHPは、ダイナミックWebコンテンツ、プロセスフォームデータ、アクセスデータベースなどを生成するために使用され、強力なコミュニティサポートとオープンソースリソースを備えています。 3。PHPは解釈された言語であり、実行プロセスには語彙分析、文法分析、編集、実行が含まれます。 4.PHPは、ユーザー登録システムなどの高度なアプリケーションについてMySQLと組み合わせることができます。 5。PHPをデバッグするときは、error_reporting()やvar_dump()などの関数を使用できます。 6. PHPコードを最適化して、キャッシュメカニズムを使用し、データベースクエリを最適化し、組み込み関数を使用します。 7

アクション中のPHP:実際の例とアプリケーション アクション中のPHP:実際の例とアプリケーション Apr 14, 2025 am 12:19 AM

PHPは、電子商取引、コンテンツ管理システム、API開発で広く使用されています。 1)eコマース:ショッピングカート機能と支払い処理に使用。 2)コンテンツ管理システム:動的コンテンツの生成とユーザー管理に使用されます。 3)API開発:RESTFUL API開発とAPIセキュリティに使用されます。パフォーマンスの最適化とベストプラクティスを通じて、PHPアプリケーションの効率と保守性が向上します。

PHP対Python:違いを理解します PHP対Python:違いを理解します Apr 11, 2025 am 12:15 AM

PHP and Python each have their own advantages, and the choice should be based on project requirements. 1.PHPは、シンプルな構文と高い実行効率を備えたWeb開発に適しています。 2。Pythonは、簡潔な構文とリッチライブラリを備えたデータサイエンスと機械学習に適しています。

H5は何を参照していますか?コンテキストの探索 H5は何を参照していますか?コンテキストの探索 Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1)html5introduceSnewelementsandapisforrich、dynamicwebapplications.2)Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3)semanticelementsimprovecontentstructurendseo.4)H5'srespo

PHP対その他の言語:比較 PHP対その他の言語:比較 Apr 13, 2025 am 12:19 AM

PHPは、特に迅速な開発や動的なコンテンツの処理に適していますが、データサイエンスとエンタープライズレベルのアプリケーションには良くありません。 Pythonと比較して、PHPはWeb開発においてより多くの利点がありますが、データサイエンスの分野ではPythonほど良くありません。 Javaと比較して、PHPはエンタープライズレベルのアプリケーションでより悪化しますが、Web開発により柔軟性があります。 JavaScriptと比較して、PHPはバックエンド開発により簡潔ですが、フロントエンド開発のJavaScriptほど良くありません。

PHPの目的:動的なWebサイトの構築 PHPの目的:動的なWebサイトの構築 Apr 15, 2025 am 12:18 AM

PHPは動的なWebサイトを構築するために使用され、そのコア関数には次のものが含まれます。1。データベースに接続することにより、動的コンテンツを生成し、リアルタイムでWebページを生成します。 2。ユーザーのインタラクションを処理し、提出をフォームし、入力を確認し、操作に応答します。 3.セッションとユーザー認証を管理して、パーソナライズされたエクスペリエンスを提供します。 4.パフォーマンスを最適化し、ベストプラクティスに従って、ウェブサイトの効率とセキュリティを改善します。

PHPの未来:適応と革新 PHPの未来:適応と革新 Apr 11, 2025 am 12:01 AM

PHPの将来は、新しいテクノロジーの傾向に適応し、革新的な機能を導入することで達成されます。1)クラウドコンピューティング、コンテナ化、マイクロサービスアーキテクチャに適応し、DockerとKubernetesをサポートします。 2)パフォーマンスとデータ処理の効率を改善するために、JITコンパイラと列挙タイプを導入します。 3)パフォーマンスを継続的に最適化し、ベストプラクティスを促進します。

See all articles